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 border-top-color is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#mydiv { /* Defines a CSS rule for an element with the id "mydiv" */
width: 200px; /* Sets the width of the element to 200 pixels */
height: 150px; /* Sets the height of the element to 150 pixels */
border: 15px solid #CC63FF; /* Sets the border of the element to 15 pixels solid with the color #CC63FF */
-webkit-animation: mymove 5s infinite; /* Applies a webkit animation named "mymove" with a duration of 5 seconds and infinite iterations */
animation: mymove 5s infinite; /* Applies an animation named "mymove" with a duration of 5 seconds and infinite iterations */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
50% {border-top-color: #22CF64;} /* Specifies the border-top-color property to change to #22CF64 at the 50% keyframe */
}
</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="mydiv">w3resource Tutorial</div><!-- Displays the text 'w3resource Tutorial' within a div element with the id "mydiv" -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->
Explanation:
Live Demo:
See the Pen border-top-color-animatable-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
e pageWhat is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4