मैं एक विशिष्ट स्थान पर CSS3 एनीमेशन कैसे शुरू कर सकता हूं?

Question

मैं CSS3 एनीमेशन का उपयोग कर रहा हूं, और मैं एनीमेशन में एक विशिष्ट स्थान पर जाने में सक्षम होना चाहता हूं। उदाहरण के लिए, सीएसएस (और बहाना है कि मैं सभी उचित उपसर्ग प्रयोग किया जाता) इस तरह दिखता है:

@keyframes fade_in_out_anim { 
    0% { opacity: 0; } 
    25% { opacity: 1; } 
    75% { opacity: 1; } 
    100% { opacity: 0; } 
} 
#fade_in_out { 
    animation: fade_in_out_anim 5s; 
} 

तो मैं एनीमेशन रोकने में सक्षम होना चाहते हैं, और 50% निशान पर ले जाते हैं। मुझे लगता है कि है कि आदर्श जावास्क्रिप्ट कुछ इस तरह दिखेगा:

var style = document.getElementById('fade_in_out').style; 
style.animationPlayState = 'paused'; 

// Here comes the made up part... 
style.animation.moveTo('50%'); // Or alternately... 
style.animationPlayPosition = '50%'; 

किसी को भी ऐसा (वेबकिट में उम्मीद है कि) बनाने के लिए एक तरह से पता है?

Answer 1

हम animation-delay संपत्ति का उपयोग कर सकते हैं। आमतौर पर यह कुछ समय के लिए एनीमेशन देरी करता है, और, यदि आप animation-delay: 2s; सेट करते हैं, तो एनीमेशन तत्व के लिए एनीमेशन लागू करने के बाद एनीमेशन दो सेकंड शुरू होगा। लेकिन, आप भी एक नकारात्मक मूल्य का उपयोग करके एक विशिष्ट समय-शिफ्ट के साथ एनीमेशन खेलना शुरू करने के लिए इसे मजबूर करने के लिए उपयोग कर सकते हैं: आप क्या कर रहे हैं लक्ष्य है पर

.element-animation{ 
animation: animationFrames ease 4s; 
animation-delay: -2s; 
} 

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/