मूल घोषणा और उपयोग
@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )संक्षिप्तता के लिए इस पृष्ठ पर बाकी कोड किसी भी उपसर्ग का उपयोग नहीं करेगा, लेकिन वास्तविक दुनिया का उपयोग ऊपर से सभी विक्रेता उपसर्गों का उपयोग करना चाहिए
कई कदम
@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )यदि किसी एनीमेशन में समान आरंभ और समाप्ति गुण होते हैं, तो ऐसा करने का एक तरीका 0% और 100% मानों को अलग करना है:
@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )या, आप हमेशा एनीमेशन को दो बार (या किसी भी संख्या में) चलाने के लिए कह सकते हैं और दिशा को बता सकते हैं alternate।
अलग-अलग गुणों के साथ कीफ़्रेम एनीमेशन को कॉल करना
.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )एनीमेशन आशुलिपि
बस सभी व्यक्तिगत मूल्यों को अलग करें। अवधि और विलंब दोनों का उपयोग करते समय आदेश को छोड़कर कोई फर्क नहीं पड़ता, उन्हें उस क्रम में रहने की आवश्यकता है। नीचे दिए गए उदाहरण में 1s = अवधि, 2s = देरी, 3 = पुनरावृत्तियों।
animation: test 1s 2s 3 alternate backwardsट्रांसफॉर्म और एनिमेशन को मिलाएं
@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )एकाधिक एनिमेशन
आप चयनकर्ता पर कई एनिमेशन घोषित करने के लिए मानों को अलग कर सकते हैं।
.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )कदम()
चरण () फ़ंक्शन नियंत्रित करता है कि एनीमेशन टाइमफ्रेम में कितने keyframes रेंडर करेंगे। आइए आपको बताते हैं:
@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )यदि आप अपने एनीमेशन में चरणों (10) का उपयोग करते हैं, तो यह सुनिश्चित करेगा कि आवंटित समय में केवल 10 कीफ़्रेम ही होंगे।
.move ( animation: move 10s steps(10) infinite alternate; )गणित अच्छी तरह से वहाँ काम करता है। हर एक सेकंड में, तत्व 10px को बाईं ओर ले जाएगा और 10px नीचे, एनीमेशन के अंत तक, और फिर हमेशा के लिए उल्टा होगा।
यह simurai द्वारा स्प्राइटशीट एनीमेशन की तरह शानदार हो सकता है।
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| 4 * | 5 * | १० | १२ | 5.1 * |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 4 * | 6.0-6.1 * |
और अधिक संसाधनों
- एमडीएन डॉक्स
- एमडीएन: सीएसएस एनीमेशन का उपयोग करना
- क्या मैं उपयोग कर सकता हूं - ब्राउज़र सपोर्ट
- वीडियो: सीएसएस एनिमेशन के लिए परिचय
