HTML-CSS


CSS text underline animation left to right

Coding Issue for android php java html-css and javascript

Let’s do it by some steps in CSS text underline animation left to right. These are CSS steps to run your underline from left to right. With CSS you can add some great effects using animation. This is so simple, you just need to add your @keyframes in the stylesheet.

CSS Property

Firstly, In this paragraph, I’m going to discuss a few properties to do this thing:

  • keyframes
  • background image
  • background-size
  • background-repeat
  • background position
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count

Keyframes for CSS text underline animation

CSS allows animation of HTML elements without using JavaScript or Flash!. The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. Keyframes hold what styles the element will have at certain times.

Keyframe has these following properties. Above all, are used in CSS for the animation.

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Similarly, To get an animation to work, you must bind the animation to an element.

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

CSS text underlines animation left to right

In the above code for CSS, text underlines animation left to right, 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;
  }

After that, in the animated_underline class, we are defining color, line size, position, etc. You can modify as per your requirement.

Conclusion

In conclusion, now the animated underline code is completed in CSS text underline animation left to right. Similarly, You can change as many CSS properties you want, as many times you want.

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

Published by Gotendra Pal Singh

Hi there! I am a blogger at Coding Issue. My skills include PHP, Wordpress, Laravel, Javascript and a lot more.

Did you find this page helpful?

X

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

*