opóźnienie animacji nie działa

Question

Dobra, mam ten tekst, który chcę pokazać po 20 latach. Używam właściwości opóźnienia animacji, ale nie działa. Być może robię coś nie tak.

Proszę mi pomóc dostać się do dobrej drodze ..

Oto mój kod ..

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

Oto link na Fiddle

Dziękuję za wszystko!

EDIT ONE:

Po zmianie kolejności właściwości animacji i dodanie krycie: 0 w tekście, mam następujący

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

Ale jeśli odejdę krycie na 0 w #tekst, tekst zniknie po zakończeniu animacji.

Jak mogę zachować tekst widoczny po zakończeniu animacji?

Dziękujemy!

Answer 1

Określono wersje -webkit w nieprawidłowej kolejności. -webkit-animation zastępuje właśnie ustawioną regułę opóźnienia. Odwróć kolejność, aby opóźnienie nastąpiło później.

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

Można uniknąć tych problemów, jeśli zawsze ustawione jeden atrybut:

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

Nie zapomnij również ustawić:

opacity: 0; 

przeciwnym razie tekst będzie widoczny, dopóki rozpoczyna się animacja i:

-webkit-animation-fill-mode: forwards; 

Aby animowane krycie zostało zachowane po zaniknięciu.

Answer 2

Trzeba umieścić animation-delay regułę po skrótowym, jak skrótowym resetuje swoją wartość domyślną, która jest 0s - czy można po prostu umieścić go w skrót:

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

http://jsfiddle.net/wXdbL/2/ (zmieniono opóźnienie na 1s, więc jest to oczywiste)