HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>How to specify the animate background color</title><!-- Set the title of the HTML document -->
<style>/* CSS style start*/
#xyz {
width: 200px; /* Set the width of the element with id="xyz" to 200 pixels */
height: 150px; /* Set the height of the element with id="xyz" to 150 pixels */
background: #CC00FF; /* Set the initial background color of the element with id="xyz" */
-webkit-animation: move 8s infinite; /* Apply the "move" animation to the element with id="xyz" in WebKit browsers with an 8-second duration and infinite repetition */
animation: move 8s infinite; /* Apply the "move" animation to the element with id="xyz" with an 8-second duration and infinite repetition */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes move {
50% {background-color: #9933CC;} /* Change the background color of the element to #9933CC at 50% of the animation duration */
}
/* Standard syntax */
@keyframes move {
50% {background-color: #FF33CC;} /* Change the background color of the element to #FF33CC at 50% of the animation duration */
}
</style>
</head>
<body>
<div id="xyz">w3resource Tutorial</div><!-- Display the text "w3resource Tutorial" within a div element with id="xyz" -->
</body>
</html>
Explanation:
Live Demo:
See the Pen background-animate-color-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