CSS underline animation left to right : with example

CSS underline animation left to right :  with example

Hmmm, Let's do it by some steps. These are CSS steps to run your underline from left to right. This is so simple, you just need to add your @keyframes in the stylesheet.

@keyframes border-dance {
    from {
      background-position: 0% bottom;
    }
    to {
      background-position: 100% bottom;
    }
  }

In the above code, we are using @keyframes with my class border-dance. In this class, we can define animation from and to. Now you need to add your class which will use for the underline.

.animated_underline {
    background-image: linear-gradient(
      to right,
      silver 50%,
      transparent 0%
    );
    background-size: 6px 4px;
    background-repeat: repeat-x;
    background-position: 0% bottom;
    animation-name: border-dance;
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

In the animated_underline class, we are defining colour, line size, position etc. You can modify as per your requirement.

Ok, now the animated underline code is completed. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Animated Underline</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style>
   .animated_underline {
    background-image: linear-gradient(
      to right,
      silver 50%,
      transparent 0%
    );
    background-size: 6px 4px;
    background-repeat: repeat-x;
    background-position: 0% bottom;
    animation-name: border-dance;
    animation-duration: 24s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes border-dance {
    from {
      background-position: 0% bottom;
    }
    to {
      background-position: 100% bottom;
    }
  }
  </style>
</head>
<body>
<div>
<h2>What is Lorem Ipsum?</h2>
<p><strong class="animated_underline">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>

You can download the above example from here:

Loading...

Draw animated underline in your HTML text

Related posts

Write a comment