Animation Verzögerung nicht funktioniert

Question

Okay, ich habe diesen Text, den ich nach 20s erscheinen soll. Ich verwende die Animation-Delay-Eigenschaft, aber es funktioniert nicht. Vielleicht mache ich etwas falsch.

Bitte helfen Sie mir zu richtigen Weg, um aus ..

Hier ist mein Code ..

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

Hier der Link auf Fiddle ist

Danke für alles!

EDIT ONE:

Nach der Reihenfolge der Animation Eigenschaften zu verändern, und das Hinzufügen der Opazität: 0 im Text, bekam ich folgende

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

Aber wenn ich überlasse die Opazität auf 0 der #text, verschwindet der Text sobald die Animation beendet ist.

Wie kann ich den Text sichtbar, nachdem die Animation erfolgt ??

Vielen Dank!

Answer 1

Sie die -webkit Versionen in der falschen Reihenfolge angegeben haben. Die -webkit-animation ersetzt die Verzögerungsregel, die Sie gerade eingerichtet haben. Kehren Sie die Reihenfolge um, so dass die Verzögerung danach kommt.

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

Sie können diese Probleme vermeiden, wenn Sie immer ein einziges Attribut gesetzt:

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

Vergessen Sie nicht, auch auf:

opacity: 0; 

Andernfalls wird der Text, bis die sichtbar sein Animation beginnt und:

-webkit-animation-fill-mode: forwards; 

Damit die animierte Opazität bleibt nach dem Ausbleichen in.

Answer 2

Sie benötigen die animation-delay Regel nach die Kurzschrift zu platzieren, da der Stenografie Ihr Wert auf den Standardwert zurücksetzt, die 0s ist - oder man könnte es nur in der Kurzschrift platzieren:

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

http://jsfiddle.net/wXdbL/2/ (die Verzögerung 1s verändert, so ist es offensichtlich)