animasyon gecikmesi

Question

Tamam çalışmıyor, ben 20'li sonra görünmesini istiyorsanız bu metin var. Animasyon gecikme özelliğini kullanıyorum ama çalışmıyor. Belki yanlış bir şey yapıyorum.

her şey için teşekkür Fiddle

üzerinde İşte

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

link .. İşte

benim kodudur .. doğru yolda almak için bana yardım edin!

DÜZENLEME BİR:

animasyon özelliklerinin sıralamasını değiştirme ve opaklık ekledikten sonra: Metinde 0, şu

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

var Ama 0'a saydamlığını bırakırsanız #text, animasyon bittiğinde metin kaybolacak. animasyon yapıldıktan sonra

metni nasıl görünür tutabilir ??

Teşekkür ederiz! steno 0s olduğu varsayılan değerinizi sıfırlıyor olarak

Answer 1

) açıktır böylece. -webkit-animation, kurduğunuz gecikme kuralının yerini alır. Siparişi tersine çevir, gecikme sonra gelir. Eğer her zaman tek özelliği ayarlarsanız

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

bu sorunları önleyebilirsiniz:

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

da ayarlamak unutmayın:

opacity: 0; 

Aksi metin kadar görünür olacak animasyon başlar ve:

-webkit-animation-fill-mode: forwards; 

Böylece animasyonlu donukluk içinde solmaya sonra saklanır.

Answer 2

Sen steno sonra animation-delay kuralı yerleştirmeniz gerekir - ya da sadece steno içinde yerleştirmek olabilir: (

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

http://jsfiddle.net/wXdbL/2/ 1'ler için gecikme değişti bunu yanlış sırayla -webkit versiyonlarını belirttiğiniz