在頁面加載時使用轉換加下劃線文字

Question

我一直在這裏已經有一段時間了，到目前爲止我還沒有走得很遠。我有這個代碼（CSS），我想在頁面加載大約8秒後給特定文本加上下劃線（從中間到外面），我只能找出：懸停部分（我希望下劃線在頁面出現8秒後出現加載，而無需將鼠標懸停在元素）：

#sec { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
} 
#sec:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 
#sec:hover:after { 
    width: 100%; 
    background: blue; 
} 

和HTML：

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div> 

我試圖讓<div id="sec">強調787-8在頁面加載[econds]之後。

Answer 1

如何使用動畫（關鍵幀），檢查片斷

PS：運行段，並等待8秒。

#sec { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 
@-webkit-keyframes border { 
 
    from {width: 0px;} 
 
    to {width:100%} 
 
} 
 

 
#sec:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: blue; 
 
    -webkit-animation-name: border; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
 
    animation-name: border; 
 
    animation-duration: 1s; 
 
    animation-delay: 8s; 
 
    animation-fill-mode: forwards; 
 
}

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div>