एनीमेशन देरी

Question

काम नहीं कर रहा है ठीक है, मेरे पास यह पाठ है जिसे मैं 20 के बाद दिखाना चाहता हूं। मैं एनीमेशन-देरी संपत्ति का उपयोग कर रहा हूं लेकिन यह काम नहीं कर रहा है। शायद, मैं कुछ गलत कर रहा हूँ।

कृपया मुझे सही रास्ते को पाने के लिए मदद करते हैं ..

यहाँ मेरी कोड है ..

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

यहाँ लिंक है पर Fiddle

सब कुछ के लिए धन्यवाद!

संपादित एक:

एनीमेशन गुण का क्रम परिवर्तित, और अस्पष्टता को जोड़ने के बाद: पाठ में 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;} 
} 

मिला लेकिन अगर मैं में 0 पर अस्पष्टता छोड़ #text, एनीमेशन खत्म होने के बाद टेक्स्ट गायब हो जाएगा।

एनीमेशन के बाद पाठ को मैं कैसे देख सकता हूं ??

धन्यवाद!

Answer 1

आपने गलत क्रम में -webkit संस्करण निर्दिष्ट किए हैं। -webkit-animation आपके द्वारा अभी सेट किए गए विलंब नियम को प्रतिस्थापित करता है। आदेश को उलट दें ताकि देरी हो।

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

ताकि एनिमेटेड अस्पष्टता को लुप्त होने के बाद बनाए रखा जा सके।

Answer 2

आप के रूप में आशुलिपि डिफ़ॉल्ट जो 0s है करने के लिए अपने मूल्य को रीसेट है, आशुलिपि के बाद animation-delay नियम जगह की जरूरत है - या तो आप सिर्फ आशुलिपि के भीतर यह जगह सकता है:

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

http://jsfiddle.net/wXdbL/2/ (देरी को 1s में बदल दिया है, इसलिए यह स्पष्ट है)