[解決済み] アニメーションディレイが効かない

質問内容

20秒後に表示させたいテキストがあります。animation-delayプロパティを使っているのですが、うまくいきません。おそらく、何か間違ったことをしているのでしょう。

正しい軌道に乗るように、ご指導ください。

以下は私のコードです。

@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;}
}

以下、リンク先です。 フィドル

今までありがとうございました。

EDIT ONE

アニメーションプロパティの順番を変更し、テキストにopacity: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;}
}

しかし、#textの不透明度を0にしておくと、アニメーションが終わるとテキストが消えてしまいます。

アニメーションが終わった後、テキストを表示したままにするにはどうしたらよいでしょうか？

ありがとうございました。

解決方法は？

を指定しました。 -webkit のバージョンは順番を間違えています。 この -webkit-animation は、先ほど設定した遅延ルールに置き換わります。 delayが後に来るように順序を逆にしてください。

-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;

フェードイン後もアニメーションの不透明度が維持されるように。