動畫延遲不起作用

Question

好的，我有我想要在20s後出現的這段文字。我正在使用動畫延遲屬性，但它不起作用。也許，我做錯了什麼。

請幫我去正確的軌道..

這裏是我的代碼..

@import url(http://fonts.googleapis.com/css?family=Economica); 
#text{ 
font-family:'Economica', sans-serif; 
font-weight:bold; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:-20px; 
margin-top:-25px; 
animation:fade-in 5s; 
animation-delay:15s; 
-webkit-animation-delay:15s; 
-webkit-animation:fade-in 5s; 


} 

@keyframes fade-in{ 
from { opacity:0;} 
to {opacity:1;} 
} 

@-webkit-keyframes fade-in{ 
from {opacity:0;} 
to {opacity:1;} 
} 

這裏是鏈接Fiddle

謝謝你的一切！

編輯一個：

改變動畫屬性的順序，並增加透明度後：在文字0，我得到了以下

#text{ 
font-family:'Economica', sans-serif; 
position:absolute; 
left:50%; 
top:50%; 
opacity:0; 
margin-left:-20px; 
margin-top:-25px; 
animation:fade-in 2s; 
animation-delay:3s; 
-webkit-animation:fade-in 2s; 
-webkit-animation-delay:3s; 
-o-animation:fade-in 2s; 
-o-animation-delay:3s; 

} 

@keyframes fade-in{ 
from { opacity:0;} 
to {opacity:1;} 
} 

@-webkit-keyframes fade-in{ 
from {opacity:0;} 
to {opacity:1;} 
} 

但是，如果我離開不透明度爲0 #text，一旦動畫結束，文本就會消失。

如何在動畫完成後保持文本可見？

謝謝！

Answer 1

您已按錯誤順序指定-webkit版本。 -webkit-animation取代您剛剛設置的延遲規則。顛倒順序，以便延遲後。

-webkit-animation:fade-in 5s; 
-webkit-animation-delay:15s; 

你能避免這些問題，如果你總是設置一個屬性：

-webkit-animation-name: fade-in; 
-webkit-animation-duration: 5s; 
-webkit-animation-delay: 15s; 

不要忘了還要設置：

opacity: 0; 

否則，文本將是直到可見動畫開始，以及：

-webkit-animation-fill-mode: forwards; 

這樣在淡入之後動畫的不透明度得以保留。

Answer 2

你需要把animation-delay規則速記後，如速記是你的價值重置爲默認這是0s - 或者你可以只把它簡寫內：

#text { 
    -moz-animation: fade-in 5s 15s; 
    -webkit-animation: fade-in 5s 15s; 
    animation: fade-in 5s 15s; 
} 

http://jsfiddle.net/wXdbL/2/（將延遲更改爲1秒，因此很明顯）