完成時暫停css動畫

Question

因此，我試圖在完成動畫後放下一些文字。

問題是它完成後就消失了，即使我將不透明度設置爲1 @ 100％。

/* text animation */ 

@-webkit-keyframes textAnimation { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateY(-200%); 
    } 
    10% { 
     opacity: 1; 
     -webkit-transform: translateY(0%); 
    } 
    20% { 
     opacity: 1; 
     -webkit-transform: translateY(0%); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(0%); 
    } 

} 




.text-animation { 
    z-index: 1000; 


    width: 100%; 
    text-align: center; 
    opacity: 0; 
    -webkit-animation: textAnimation 2s linear 2s; 
    -moz-animation: textAnimation 2s linear 2s; 
    -o-animation: textAnimation 2s linear 2s; 
    -ms-animation: textAnimation 2s linear 2s; 
    animation: textAnimation 2s linear 2s; 
    -webkit-animation-iteration-count: 1; 
     -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    -o-animation-delay: 1s; 
    -ms-animation-delay: 1s; 
    animation-delay: 1s; 
} 

/* text animation */ 

我只是不明白的問題是在這裏什麼...

Answer 1

這爲我工作。

如果您在類中設置了結束狀態並且不添加延遲。

@-webkit-keyframes textAnimation { 
    0% { opacity: 0; -webkit-transform: translateY(-200%); } 
    33% { opacity: 1; -webkit-transform: translateY(-200%); } 
    100% { opacity: 1; -webkit-transform: translateY(0%); } 
} 

.text-animation { 
color:#fff; 
font-size:32px; 
width: 100%; 
text-align: center; 
opacity: 1; 
-webkit-animation: textAnimation 3s linear; 
-moz-animation: textAnimation 3s linear; 
-o-animation: textAnimation 3s linear; 
-ms-animation: textAnimation 3s linear; 
animation: textAnimation 3s linear; 
} 

Answer 2

在你的.text動畫聲明補充一點：

-webkit-animation-fill-mode: forwards; 

多虧了它，你的動畫將保持到最後的關鍵幀狀態。 （這裏是不透明度0）。

您可以在這裏看到的結果：http://codepen.io/joe/pen/CkbcL

來源：https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode