एक चक्र

Question

के अंत में एनीमेशन को रोक नहीं सकता है, मैं मिनट में एक सीएसएस एनीमेशन बना रहा हूं, और इसमें मैं सामान ले रहा हूं और जब तक कि उपयोगकर्ता अपने माउस को दूर नहीं ले जाता तब तक यह अंत स्थिति में रहना चाहता है।

body { 
    background: url('osx.jpg'); 
    padding: 0; 
    margin: 0; 
    line-height: 60px; 
} 

@-webkit-keyframes item1 { 
    0% { bottom: -120px; left: 0px; } 
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } 
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } 
    } 

@-webkit-keyframes item2 { 
    0% { bottom: -120px; left: 0px; } 
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); } 
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); } 
} 

@-webkit-keyframes item3 { 
    0% { bottom: -120px; left: 0px; } 
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); } 
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); } 
} 

    div { 
    position: relative; 
    } 
#folder { 
    width: 120px; 
    margin: 0px auto; 
} 

#folder > div { 
    position: absolute; 
} 

#folder:hover > div:nth-of-type(1) { 
    -webkit-animation-name: item1; 
    -webkit-animation-duration: 10s; 
} 

#folder:hover > div:nth-of-type(2) { 
    -webkit-animation-name: item2; 
    -webkit-animation-duration: 10s; 
} 

#folder:hover > div:nth-of-type(3) { 
    -webkit-animation-name: item3; 
    -webkit-animation-duration: 10s; 
} 

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

Answer 1

निम्नलिखित टिप्पणी मेरे लिए काम किया। धन्यवाद माइकल

"आप एनीमेशन के अंत में एनीमेशन राज्य फ्रीज करने के भरण-मोड जोड़ने की जरूरत है।

-webkit-animation-fill-mode: forwards; 

forwards अंतिम फ्रेम के राज्य में एनीमेशन छोड़ देता है

backwards पत्ते शुरू में एनीमेशन

Answer 2

इस प्रयास करें:

-webkit-animation-duration: 10s, 10s; 

:)

Answer 3

css3 एनिमेशन एनीमेशन के अंत में डिफ़ॉल्ट शैली पर रीसेट। आप जावास्क्रिप्ट के साथ कुछ कोशिश कर सकते हैं:

आप अपनी एनीमेशन में इवेंट लिस्टनर जोड़ सकते हैं, उन शैलियों को पुनर्प्राप्त कर सकते हैं जिन्हें आप रखना चाहते हैं, उन्हें मैन्युअल रूप से लागू करें और एनीमेशन को हटा दें।

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd', 
    function(){ 
     document.getElementById('yourdiv').style.backgroundPosition = '0px 0px'; 
     document.getElementById('yourdiv').style.webkitAnimationName = 'none'; 
    }, 
    false 
); 

Answer 4

यदि मैं सही तरीके से प्रश्न समझता हूं, तो ऐसा लगता है कि आपको पुनरावृत्ति को '1' पर सेट करने की आवश्यकता है।

-webkit-animation-iteration-count: 1; 

Answer 5

शायद ज़रुरत पड़े अपने एनीमेशन अभी भी पहली फ्रेम करने के लिए रीसेट करता है, आदेश जिसमें आप सीएसएस की घोषणा के साथ सावधान रहना:

यह ठीक काम कर रहा है:

animation: yourAnimationName 1s; 
    animation-fill-mode: forwards; 

यह (पहली फ्रेम करने के लिए रीसेट) नहीं होगा:

animation-fill-mode: forwards; 
    animation: yourAnimationName 1s; 

ट्रिकी!