मैं एक एचटीएमएल 5 एनीमेशन को कार्यान्वित करना चाहता हूं जिसमें एक बिंदु को बिंदु ए से बिंदु पर ले जाने से थोड़ा अधिक शामिल है। इसलिए मैं संक्रमणों के बजाए कीफ्रेम का उपयोग करने पर विचार कर रहा हूं। हालांकि, मैं सिर्फ एनीमेशन को एक बार चलाने के लिए चाहता हूं, और केवल तभी ट्रिगर किया जाता है।एक बार CSS3 कीफ्रेम एनीमेशन कैसे चलाएं, और केवल तभी ट्रिगर किया जाए?
समस्या दो गुना है: 1) जब एनीमेशन समाप्त हो जाता है, तो आइटम इसकी प्रारंभ स्थिति पर वापस आ जाता है। क्या आगे की सूचना तक इसे अंतिम स्थिति में रहने का कोई तरीका है? 2) जावास्क्रिप्ट से बाद में एनीमेशन को पुनरारंभ करने का कोई तरीका है?
अन्य संभावित समाधान जो मैं देखता हूं, ऑन ट्रांजिशन एंड ईवेंट का उपयोग करके कुछ संक्रमणों को चेन करना होगा।
प्रदर्शन पर विचार करने का सबसे अच्छा समाधान क्या है? मैं केवल मोबाइल सहित वेबकिट ब्राउज़र को लक्षित कर रहा हूं।
संपादित करें: @ क्रिस्टोफर-विलेंडर द्वारा टिप्पणी के आधार पर मैंने JSfiddle बनाया, जो मूल रूप से मैं चाहता था। धन्यवाद!
HTML:
<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>
जावास्क्रिप्ट:
document.getElementById('start').addEventListener('click', function(e) {
document.getElementById('ball').classList.add('remove');
});
document.getElementById('reset').addEventListener('click', function(e) {
document.getElementById('ball').classList.remove('remove');
});
सीएसएस:
.ball {
width:100px;
height:100px;
border-radius:100px;
background-color:darkred;
position:absolute;
top:100px;
left:200px;
}
@-webkit-keyframes slide {
from { top:100px; left:200px; }
to { top:100px; left:-100px; }
}
.remove {
animation: slide 1s linear;
-webkit-animation: slide 1s linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
आपको एनीमेशन-फिल-मोड का उपयोग करने में सक्षम होना चाहिए: आगे; एनीमेशन की अंत स्थिति को बनाए रखने के लिए। आप एनीमेशन को फिर से ट्रिगर कैसे करना चाहते हैं? निश्चित समय के बाद ऑनक्लिक, होवर या स्वचालित? –
मैं इसे ऑनक्लिक और/या टाइमर दोनों का उपयोग शुरू करना चाहता हूं। –
बस आपके संपादन को देखा, खुशी है कि मैं मदद कर सकता हूं! –