jQuery के साथ रन/पॉज़ सीएसएस एनीमेशन

Question

मैं एक रोके गए सीएसएस एनीमेशन के साथ शुरू करना चाहता हूं फिर फिर से रुकने से पहले एक सेकंड के लिए एनीमेशन चलाने के लिए jQuery का उपयोग करें।

सीएसएस नीचे है:

#animation { 
    -webkit-animation: one 5s infinite; 
    -webkit-animation-play-state: paused; 
} 

@-webkit-keyframes one { 
    0% { .... } 
    ..... 
    100% { .... } 
} 

यह कुछ जटिल मुख्य-फ़्रेम है और उद्देश्य है कि यह तो 20% की स्थिति में 1 सेकंड के लिए अदा कर सकता है रोक है।

मैं jQuery नीचे करने की कोशिश की, लेकिन यह काम नहीं किया:

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");   
}); 

अगर मैं देरी को दूर (#click div मैं एनीमेशन के लिए ट्रिगर के रूप में उपयोग करना चाहते हैं) और बाद में रोकें यह ठीक काम करता है लेकिन स्पष्ट रूप से लूपिंग जारी है।

जैसे:

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running");    
}); 

क्या तुम ठीक लोग सुझाव है?

Answer 1

jQuery देरी() जब आप सीएसएस संपत्ति में हेरफेर कर रहे हैं तो काम नहीं करता है। setTimeOut() के बजाय

$("#click").click(function(){ 
    $("#animation").css("-webkit-animation-play-state", "running"); 
    setTimeout(function() { 
     $("#animation").css("-webkit-animation-play-state", "paused"); 
    }, 1000); 
});