CSS Properties: How to specify the border bottom color is animatable?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify the border bottom color is animatable</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
#DIV {
width: 150px; /* Setting the width of the div with ID "DIV" */
height: 100px; /* Setting the height of the div with ID "DIV" */
border: 10px solid black; /* Setting a solid black border with a width of 10 pixels for the div with ID "DIV" */
-webkit-animation: mymove 5s infinite; /* Applying a WebKit animation named "mymove" with a duration of 5 seconds and infinite repetition to the div with ID "DIV" */
animation: mymove 5s infinite; /* Applying an animation named "mymove" with a duration of 5 seconds and infinite repetition to the div with ID "DIV" */
 }
@keyframes mymove {
50% {border-bottom-color: #CC63FF;} /* Defining a keyframe animation named "mymove" where at 50% of the animation duration, the border bottom color changes to #CC63FF */
}
</style>
</head>
<body>
<div id="DIV">CSS, stands for Cascading Style Sheet is a computer language to describe presentation.</div><!-- Div element with ID "DIV" containing text content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to specify an animatable border bottom color using CSS animations.
The CSS style block applies styling to the div with ID "DIV".
width: 150px; sets the width of the div to 150 pixels.
height: 100px; sets the height of the div to 100 pixels.
border: 10px solid black; sets a solid black border with a width of 10 pixels for the div.
-webkit-animation: mymove 5s infinite; and animation: mymove 5s infinite; apply the animation named "mymove" with a duration of 5 seconds and infinite repetition to the div.
@keyframes mymove defines a keyframe animation named "mymove".
50% {border-bottom-color: #CC63FF;} specifies that at 50% of the animation duration, the border bottom color changes to #CC63FF.
The div with ID "DIV" contains the text content "CSS, stands for Cascading Style Sheet is a computer language to describe presentation."

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page