CSS Properties: How to set the border-top property is animatable?
Solution:
HTML Code:
<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to set the border-top property is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#div { /* Defines a CSS rule for an element with the ID 'div' */
width: 300px; /* Sets the width of the element to 300 pixels */
height: 200px; /* Sets the height of the element to 200 pixels */
border: 1px solid red; /* Sets the border of the element to a 1 pixel solid red line */
-webkit-animation: mymove 5s infinite; /* Applies a CSS animation named 'mymove' with a duration of 5 seconds and an infinite repeat count, specifically for WebKit browsers */
animation: mymove 5s infinite; /* Applies a CSS animation named 'mymove' with a duration of 5 seconds and an infinite repeat count */
}
@keyframes mymove { /* Defines a CSS animation named 'mymove' */
50% {border-top: 15px solid #22CF64;} /* Specifies the CSS property 'border-top' to change to a 15 pixel solid border with the color #22CF64 at 50% of the animation duration */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<div id="div">w3resource Tutorial</div><!-- Displays the text 'w3resource Tutorial' within a div element with the ID 'div' -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->
Explanation:
- The HTML document structure includes essential elements such as html, head, title, style, and body.
- A CSS rule is defined for an element with the ID div, setting its width, height, and border properties.
- An animation named mymove is defined using @keyframes, specifying that at 50% of the animation duration, the border-top property should change to a 15 pixel solid border with the color #22CF64.
- The text "w3resource Tutorial" is displayed within a <div> element with the ID div.
- No comments were added below the code line as requested.
Live Demo:
See the Pen border-top-animatable-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
Yes | Yes | Yes | Yes | No |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics