CSS Properties: How to set the width of the bottom border animatable?

Last update on February 17 2024 12:46:56 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the width of the bottom border animatable</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
#div {
width: 150px; /* Sets the width of the div element */
height: 100px; /* Sets the height of the div element */
border: 1px solid red; /* Sets the border of the div element */
-webkit-animation: mymove 5s infinite; /* Applies a CSS animation to the div element for WebKit browsers */
animation: mymove 5s infinite; /* Applies a CSS animation to the div element */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
50% {border-bottom-width: 50px;} /* Specifies the border-bottom-width property at 50% of the animation */
}
</style>
</head>
<body>
<div id="div">CSS, stands for Cascading Style Sheet is a computer language to describe presentation.</div><!-- div element with text content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to animate the width of the bottom border of a <div> element.
The CSS style block targets the div element with the id "div".
The width and height of the div are set to 150px and 100px respectively.
The border is set to 1px solid red.
An animation named "mymove" is defined using keyframes.
In the keyframes, the border-bottom-width property is specified to change to 50px at the 50% mark of the animation.
As a result, the bottom border width of the div element will be animated from its initial width to 50px over a duration of 5 seconds, and the animation will repeat infinitely.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page