ritardo animazione non funzionante

Question

OK, ho questo testo che voglio apparire dopo gli anni '20. Sto usando la proprietà delay dell'animazione ma non funziona. Forse, sto facendo qualcosa di sbagliato.

Si prega di darmi una mano per arrivare al binario giusto ..

Ecco il mio codice ..

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

ecco il link sul Fiddle

Grazie per tutto!

EDIT ONE:

Dopo aver cambiato l'ordine delle proprietà di animazione, e aggiungendo l'opacità: 0 nel testo, ho ottenuto il seguente

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

Ma se lascio l'opacità a 0 in il testo #, il testo scomparirà una volta terminata l'animazione.

Come posso mantenere il testo visibile dopo l'animazione?

Grazie!

Answer 1

Hai specificato le versioni -webkit nell'ordine sbagliato. Il -webkit-animation sostituisce la regola di ritardo appena impostata. Invertire l'ordine in modo che il ritardo venga dopo.

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

È possibile evitare questi problemi se si imposta sempre un singolo attributo:

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

Non dimenticare di impostare anche:

opacity: 0; 

In caso contrario, il testo sarà visibile fino a quando il l'animazione inizia e:

-webkit-animation-fill-mode: forwards; 

In modo che l'opacità animata venga mantenuta dopo la dissolvenza.

Answer 2

è necessario posizionare il animation-delay regola dopo la stenografia, come l'abbreviazione sta reimpostando il tuo valore al default, che è 0s - o si può solo metterlo all'interno della stenografia:

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

http://jsfiddle.net/wXdbL/2/ (cambiato il ritardo a 1s quindi è ovvio)