How to set the width of the bottom border animatable using CSS ?
Last Updated :
15 May, 2023
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" >GeeksforGeeks</ div >
</ body >
</ html >
|
Output:
animation
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...