Skip to content
Related Articles

Related Articles

Improve Article

How to define the border bottom color is animatable in CSS ?

  • Last Updated : 24 Apr, 2021

In this article, we will learn How to define the border-bottom-color is animatable in CSS.

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:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :