How to set the width of the bottom border animatable using CSS ?
In this article, we will learn to set the width of the border-bottom animate using CSS.
Approach: The border-bottom-width is the width of the bottom border, and we want to animate its width. We will use the animation property of the CSS. It takes three values
- The first is the name of the animation which is a keyframe name that we want to bind with.
Syntax:
@keyframe myFun { 100%{ border-bottom-width: 25px; } }
- The second is the time for which it animates.
- And the last one is the number of times we want to animate.
Syntax:
animation: animation_name animation_duration animation_count
Example: In this example, we will animate the bottom border.
HTML
<!DOCTYPE html> < html > < head > < style > .gfg { width: 300px; height: 200px; border: solid 1px green; color: green; font-size: 30px; margin-left: 20%; animation: myFun 5s infinite; } @keyframes myFun { 100% { border-bottom-width: 25px; } } </ style > </ head > < body > < div class = "gfg" >w3wiki</ div > </ body > </ html > |
Output: