कैसे एक looped एनीमेशन css3

Question

का उपयोग कर मैं निम्नलिखित के साथ एक css3 एनीमेशन है इंतजार करना:

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.animated { 
-webkit-animation-name: rotate; 
-webkit-animation-duration: 2.4s; 
-webkit-animation-iteration-count: infinite; 
-webkit-transition-timing-function: ease-in-out; 
} 

यह दोषरहित काम करता है, ठीक है ..., मैं इसे छोरों के बीच प्रतीक्षा बनाना चाहते:
एनीमेशन शुरू, एनीमेशन-फ़िनिश, प्रतीक्षा (के बारे में 0.5s), एनीमेशन शुरू, एनीमेशन अंत, प्रतीक्षा (के बारे में 0.5s) ...

पीएस: मैंने -webkit-animation-delay की कोशिश की है, यह काम नहीं करता है।

कोई मदद?

Answer 1

अपनी एनीमेशन अवधि में 0.5 सेकंड जोड़ें, फिर अपने keyframes में एक अतिरिक्त फ्रेम बनाएं जो रोटेशन राशि को परिवर्तित नहीं करता है;

@-webkit-keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    } 
    83% { /*2.4/2.9 = 0.827*/ 
    -webkit-transform: rotate(360deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 
.animated { 
... 
-webkit-animation-duration: 2.9s; /*note the increase*/ 
... 
} 

लिटिल डेमो: little link।

Answer 2

जावास्क्रिप्ट द्वारा निर्दिष्ट समय के लिए तत्व पर सीएसएस वर्ग को अक्षम करने से आपकी समस्या हल हो सकती है।

function delayAnimation() { 
    var animatedEl = document.getElementById('whatever'); 
    animatedEl.className = ''; 
    setTimeout(function() { 
     animatedEl.className = 'animated' 
     setTimeout(delayAnimation, 2400);// i see 2.4s is your animation duration 
    }, 500)// wait 0.5s 
} 

उम्मीद है कि इससे मदद मिलती है।

संपादित करें: मैंने कोड को ठीक करने के लिए इस उत्तर को अपडेट किया है। आप jsfiddle पर एक पूरी तरह से काम कर रहे उदाहरण देख सकते हैं। कोड इंगित करने के लिए @Fabrice का धन्यवाद करने के लिए धन्यवाद।

Answer 3

आप एक संक्रमण का उपयोग कर सकते हैं। उदाहरण के लिए:

transition: all 0.6s ease-in-out; 

जहां transition-delay:0.6s;