Automatically animated css javascript underline

Question

Need make CSS (Javascript) underline like this (Some Example from codepen)

@import url(http://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
  background:  #004050;
  font-family: Quando;
  font-weight: 300;
  width: 100%;
}
h2, h3 {
  background: #0D757D;
  width: 100%;
  min-height: 200px;
  line-height: 200px;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  color: rgba(0,0,0,.4);
  margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}

h2 > a, h3 > a {
  text-decoration: none;
  color: rgba(0,0,0,.4);
  z-index: 1;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
.uno a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #ffdb00;  
}
.dos > a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  border: 1px solid #000;
  bottom: -2px;
  left: 0;
  background: #fff;
  border-radius: 5px;
  opacity: 0;
  transform: scalex(0);
  transition: .5s;
}
.dos.bis > a:after {
  opacity: .05;
  transform: scalex(1);
}
.dos:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}
.dos.bis > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FF5E33;
}

h3 > a:before {
  content: "";
  background: #7FDBFF;
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  transform: scaleX(0);
  animation: 1.4s forwards no-hover-v linear;
  animation-fill-mode: forwards;
  z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
  animation: .5s forwards hover-v linear;
  animation-fill-mode: forwards;
}
@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 5px;
     }
  45% {   
      transform: scaleX(1.05);
      height: 5px;
     }
  55% {height: 5px;}
  100% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
}
@keyframes no-hover-v {
  0% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
  45% {height: 5px;}
  55% {   
      transform: scaleX(1.05);
      height: 5px;
      opacity: 1;
     }
  
  100% {
      transform: scaleX(0);
      height: 5px;
      opacity: .02;
     }
}

p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}

<h2>
  <a href=''>:hover, please</a>
</h2>

But the underline must start growing from left to right and and then reduce to from right to left with some speed. And the underline must be animated automatically without mouse hovering links.

An when link have mouse hover the underline must be simultaneously grow to right.

Please code how to do this.

There is a lot of unrelated CSS in your example. Can you please pare it down to just the part concerning the underline and its animation? — tavnab, May 08 '17 at 19:40
Welcome to StackOverflow! What research have you made? This question shows no effort at all. Be sure to check out [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — user7401478, May 08 '17 at 20:11
your link to codepen example is not showing. please edit and make sure to put the link. — ITWitch, May 09 '17 at 01:45

score 0 · Answer 1 · answered May 08 '17 at 19:49

Use transform-origin to control the direction of the scale(), and you can trigger with a class to add/remove the border.

var a = document.getElementById("a");

setTimeout(function() {
  a.classList.add("under");
  setTimeout(function() {
    a.classList.remove("under");
  }, 2000);
}, 500);

h2 {
  background: #0D757D;
  width: 100%;
  min-height: 200px;
  line-height: 200px;
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
  color: rgba(0,0,0,.4);
  margin: 3rem auto 0;
}

h2 > a {
  text-decoration: none;
  color: rgba(0,0,0,.4);
  z-index: 1;
  position: relative;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
  transform-origin: 0 0;
}
h2 > a.under:before {
  visibility: visible;
  transform: scaleX(1);
}

<h2>
  <a id="a" href=''>:hover, please</a>
</h2>

Automatically animated css javascript underline

1 Answers1