CSS Properties: How to color property is animatable?

Last update on February 20 2024 12:25:50 (UTC/GMT +8 hours)

Solution:

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:

This HTML document demonstrates how to create an animatable color property using CSS animations.
The CSS style block defines rules for the div with the id "mydiv".
The div with the id "mydiv" has a magenta border with a thickness of 1 pixel, a width of 200 pixels, and a text color of purple (#CC64FF).
An animation named "mymove" is applied to the div with the id "mydiv" for 5 seconds, repeating infinitely.
The CSS animation "mymove" is defined using keyframes, specifying that at the halfway point (50%), the color of the div with the id "mydiv" changes to a shade of blue (#3334CC).
The HTML body contains an h1 element with the text "w3resource Tutorial" and a paragraph element describing CSS.
During the animation, the text color of the div with the id "mydiv" changes from purple to blue at the halfway point, creating an animatable color effect.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page