Skip to content
Related Articles

Related Articles

Improve Article

How to set the width of the bottom border animatable using CSS ?

  • Last Updated : 23 Apr, 2021

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-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>
    <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

My Personal Notes arrow_drop_up
Recommended Articles
Page :