सीएसएस 3 एनीमेशन में देरी का समय जोड़ें

Question

मैंने बस एक एवीआई को एक div पर सेट किया है और यह सफल हुआ। अब मैं इसे साबित करना चाहता हूं क्योंकि इसकी देरी बहुत कम है! तो कैसे मैं एनीमेशन (0% से 25%) और एनीमेशन (25% से 50%) यहाँ के बीच देरी समय जोड़ सकते हैं कोड है:

#flow{ 
     position:absolute; 
     -webkit-animation:mymove 10s ease-in-out; 
     -webkit-animation-iteration-count:3; 
     -webkit-animation-delay:1s; 
    } 

@-webkit-keyframes mymove 
    { 
     0%{left:5px;} 
     25%{left:127px;} 
     50%{left:249px;} 
     75%{left:371px;} 
     100%{left:5px;} 
    } 

---

हर किसी को आपका ध्यान के लिए धन्यवाद! मुझे जवाब मिल गया है लेकिन मुझे कीफ्रेम में प्रतिशत की परिभाषा के एपीआई नहीं पता! और यदि आप इसके बारे में sth जानते हैं, तो बस मुझे एक हाथ दें, बहुत बहुत धन्यवाद!

@-webkit-keyframes mymove 
{ 
    0%{left:5px;} 
    25%{left:127px;} 
    26%{left:127px;} 
    27%{left:127px;} 
    28%{left:127px;} 
    29%{left:127px;} 
    30%{left:127px;} 
    31%{left:127px;} 
    32%{left:127px;} 
    33%{left:127px;} 
    34%{left:127px;} 
    35%{left:127px;} 
    50%{left:249px;} 
    75%{left:371px;} 
    100%{left:5px;} 
} 

Answer 1

मुझे नहीं लगता कि आप एनीमेशन के एकल हिस्सों में देरी कर सकते हैं। आप क्या कर सकते हैं, दो एनिमेशन का उपयोग करना और उन्हें देरी से शुरू करना है।

#flow{ 
     position:absolute; 
     -webkit-animation: 
      mymove_first 10s 0s 10 ease-in-out, 
      mymove_second 10s 2s 10 ease-in-out; 
    } 

@-webkit-keyframes mymove_first 
    { 
     0%{left:5px;} 
     25%{left:127px;} 
    } 

@-webkit-keyframes mymove_second 
    { 
     50%{left:249px;} 
     75%{left:371px;} 
     100%{left:5px;} 
    } 

Answer 2

मैं इस समस्या में पड़ गए, जहाँ तक मैं पा सकते हैं, jQuery के बिना आप फ्रेम में देरी नहीं कर सकते।

आप एनीमेशन की शुरुआत में देरी कर सकते हैं। आप मूल फ्रेम के समान स्थिति को समाप्त करने के लिए एनीमेशन भी प्राप्त कर सकते हैं।

मतलब एक मैं उपयोग करते हैं, उदाहरण के लिए कई एनिमेशन करने के लिए, सक्षम किया जा रहा है:

आपका div:

<div id="bannerImg" class="banner-RunAnimation"></div> 

भागो एनीमेशन

.RunAnimation { 
         -webkit-animation: animation1 3s 0s 1 ease-in-out, 
         animation2 5s 5s 1 ease-out forwards; 
      } 

एनिमेशन:

@-webkit-keyframes animation1 { 
0% {-webkit-transform: translateY(-0px);} 
50% {-webkit-transform: translateY(-150px);} 
100% {-webkit-transform: translateY(-150px); 
     opacity:0;} 
}  

@-webkit-keyframes animation2 { 
0% {transform: translateY(-0px);} 
100% {transform: translateY(-150px);} 
}  

डी द्वारा एनिमेशन elaying और अस्पष्टता का उपयोग कर, आप, qutie में कुछ कर सकते हैं अगर यह jQuery

पर गौर मदद नहीं करता है

Answer 3

आप इसे (अपने उदाहरण का पालन करना) प्रतिशत के साथ खेल को रोक सकते हैं: आप

@-webkit-keyframes mymove 
{ 
    0%{left:5px;} 
    25%{left:127px;} 
    35%{left:127px;} 
    50%{left:249px;} 
    75%{left:371px;} 
    100%{left:5px;} 
} 

सभी प्रतिशत 25% से 35% के बीच रखने की आवश्यकता नहीं है, ब्राउज़र उन्हें अनदेखा कर रहा है। आप पिक्सेल 5 से 127 तक 0 से 25% तक चले जाते हैं, यदि आपकी एनीमेशन 10 सेकेंड है तो इसे करने में 2.5 सेकंड लगेंगे, फिर उसी पिक्सेल के बाद से 1 सेकंड को 25% से 35% के बीच रोक दें, फिर जारी रखें अगले एनीमेशन 249 पिक्सेल, यह 1.5 सेकंड और इतने पर ...

आशा है कि यह मदद करता है ले जाएगा!