CSS Properties: How to specify the animate background color?

Last update on February 16 2024 13:18:54 (UTC/GMT +8 hours)

Solution:

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:

The CSS code defines an animation called "move" that changes the background color of an element.
The animation is applied to an element with the id "xyz".
In the animation, the background color changes to #9933CC at 50% of the animation duration for WebKit browsers (Chrome, Safari, Opera) and #FF33CC for other browsers.
The animation has an 8-second duration and repeats infinitely.

Live Demo:

See the Pen background-animate-color-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page