HTML Code:
<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to color property is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#mydiv {
border: 1px solid #ff00ff; /* Adds a magenta border with a thickness of 1 pixel around the div with the id "mydiv" */
width: 200px; /* Sets the width of the div with the id "mydiv" to 200 pixels */
color: #CC64FF; /* Sets the text color for the div with the id "mydiv" to a shade of purple */
-webkit-animation: mymove 5s infinite; /* Applies a CSS animation named "mymove" to the div with the id "mydiv" for 5 seconds, repeating infinitely; specific to WebKit browsers */
animation: mymove 5s infinite; /* Applies a CSS animation named "mymove" to the div with the id "mydiv" for 5 seconds, repeating infinitely */
}
@keyframes mymove { /* Defines a CSS animation named "mymove" */
50% {color: #3334CC;} /* Specifies the color of the div with the id "mydiv" to change to a shade of blue at the halfway point of the animation */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<div id="mydiv"><!-- Starts a div with an id of "mydiv" -->
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.</p><!-- Inserts a paragraph element with text describing CSS -->
</div><!-- Ends the div with the id "mydiv" -->
</body>
</html>
Explanation:
Live Demo:
See the Pen color-animatable-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What 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