In this article, we will learn How to define the border-bottom-color is animatable in CSS. Animating the border-bottom-color of an element helps draw attention to it and make it more visually interesting.
Approach: The border-bottom-color is the color of the bottom border, and we want to animate its color. To do that, we will use the animation property of the CSS. That 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-color: red;
}
}- 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 are using the above-explained approach.
HTML
<!DOCTYPE html><html>
<head>
<title></title>
<style>
.gfg{
width: 300px;
height: 200px;
border: solid 15px green;
color: green;
font-size: 30px;
margin-left: 20%;
animation: myFun 3s infinite;
}
@keyframes myFun {
100%{
border-bottom-color: red;
}
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
</body>
</html>
|
Output: