アニメーションの遅延が動作しない

Question

さて、私は20秒後に表示したいこのテキストを持っています。私はアニメーション遅延プロパティを使用していますが、動作していません。おそらく、私は間違ったことをしています。

ここ

@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

に..ですここで

が私のコード..です右のトラックに到達するために私を助けてくださいすべてのためにありがとうございました！

EDIT ONE：

アニメーションプロパティの順序を変更し、不透明度を追加した後：テキスト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、アニメーションが終了するとテキストは消えます。

アニメーションの実行後にテキストを表示し続けるにはどうすればよいですか？

ありがとうございました！速記が0sでデフォルトにあなたの値をリセットされるよう

Answer 1

-webkitのバージョンを間違った順序で指定しました。 -webkit-animationは、設定したばかりの遅延ルールを置き換えます。遅れが来るように順序を逆にする。

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

あなたは常に単一の属性を設定する場合は、これらの問題を避けることができます。それ以外の場合は、テキストがするまで表示されます

opacity: 0; 

を：

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

も設定することを忘れないでください。アニメーションが始まり、：

-webkit-animation-fill-mode: forwards; 

フェードイン後にアニメーション不透明度が保持されるようにします。

Answer 2

あなたは、速記後animation-delayルールを配置する必要がある - またはあなただけの速記以内にそれを置くことができる：（

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

http://jsfiddle.net/wXdbL/2/遅延が1秒に変更されていることが分かります）