चरणों के साथ एक स्प्राइट शीट को एनिमेटेड करना ()

यदि आप साइट पर gif का उपयोग नहीं करना चाहते हैं, लेकिन उनके बेहतर रंग के लिए PNG पसंद करते हैं, लेकिन फिर भी उन्हें चेतन करने की आवश्यकता है, तो यहां तरीका है:

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

div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } } 

इसके और अन्य एनीमेशन फ़ंक्शंस के बीच अंतर यह है कि 0px से other500px तक के एक चिकनी आंदोलन के बजाय उनके बीच विराम के साथ तेज कूदता है। यह उन एनिमेशन के लिए आदर्श है जो स्प्राइट-फ्रेम शीट का उपयोग करते हैं। उपरोक्त उदाहरण में, चरण 50px है और ठहराव 100 मिलीसेकंड (कुल 10 कदम) है।

यहाँ एक छोटा डेमो है ।

जैसा कि आप देख सकते हैं, आप एनीमेशन की प्लेबैक गति को बदल सकते हैं, जो बहुत ही मनभावन है, लेकिन एक समस्या है: एनीमेशन हमेशा पहले फ्रेम से शुरू होता है और इसलिए झटकेदार दिखता है। मैंने एनिमेशन की अवधि (माता-पिता से विरासत में मिली) को एनिमेट करने की भी कोशिश की, लेकिन दुर्भाग्य से यह समर्थित नहीं है। इसलिए, मुझे लगता है कि यदि आपको अधिक गतिशील गति नियंत्रण (एनीमेशन के एनीमेशन) की आवश्यकता है, तो आपको अभी भी जावास्क्रिप्ट का सहारा लेना होगा।

उपसंहार। इस ट्रिक का वास्तविक उपयोग मामला पाया गया है: इम्पेंडिंग लोगो।