自動動畫CSS JavaScript的強調

Question

需要使CSS（JavaScript）的強調這樣的（從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>

但底線必須開始從左至右增長，進而降低以一定的速度從右到左。下劃線必須在沒有鼠標懸停鏈接的情況下自動生成動畫。

當鏈接有鼠標懸停時，下劃線必須同時長到右側。

請編碼如何做到這一點。

Answer 1

使用transform-origin來控制scale()的方向，您可以使用類觸發以添加/刪除邊框。

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>