css animé automatiquement javascript souligner

Question

Besoin faire CSS (Javascript) soulignent comme ceci (Certains exemple de 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>

Mais le soulignement doit commencer à croître de gauche à droite et puis réduire de droite à gauche avec une certaine vitesse. Et le soulignement doit être animé automatiquement sans que les souris ne survolent les liens.

Lorsque le lien survole le pointeur de la souris, le trait de soulignement doit croître simultanément vers la droite.

Veuillez coder comment procéder.

Answer 1

Utilisez transform-origin pour contrôler la direction du scale() et vous pouvez déclencher avec une classe pour ajouter/supprimer la bordure.

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>