एनीमेशन - सीएसएस-ट्रिक्स

animationसीएसएस में संपत्ति चेतन कई अन्य सीएसएस गुण जैसे करने के लिए इस्तेमाल किया जा सकता color, background-color, height, या width। प्रत्येक एनीमेशन को उस @keyframesनियम के साथ परिभाषित करने की आवश्यकता होती है जिसे तब animationसंपत्ति के साथ कहा जाता है , जैसे:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

प्रत्येक @keyframesनियम नियम को परिभाषित करता है कि एनीमेशन के दौरान विशिष्ट क्षणों में क्या होना चाहिए। उदाहरण के लिए, 0% एनीमेशन की शुरुआत है और 100% अंत है। फिर इन कीफ़्रेम को या तो शॉर्टहैंड animationप्रॉपर्टी या इसके आठ उप-गुणों द्वारा नियंत्रित किया जा सकता है , ताकि उन कीफ़्रेमों को कैसे नियंत्रित किया जाए, इस पर अधिक नियंत्रण दिया जा सके।

उप-गुणों

• animation-name: @keyframesजोड़-तोड़ करने के लिए शासन के नाम की घोषणा करता है ।
• animation-duration: एक चक्र को पूरा करने के लिए एक एनीमेशन के लिए समय की लंबाई।
• animation-timing-function: पूर्व निर्धारित त्वरण घटता स्थापित करता है जैसे easeया linear।
• animation-delay: लोड किए जा रहे तत्व और एनीमेशन अनुक्रम (शांत उदाहरण) की शुरुआत के बीच का समय।
• animation-direction: चक्र के बाद एनीमेशन की दिशा निर्धारित करता है। इसका डिफ़ॉल्ट प्रत्येक चक्र पर रहता है।
• animation-iteration-count: जितनी बार एनीमेशन किया जाना चाहिए।
• animation-fill-mode: एनीमेशन से पहले / बाद में कौन से मान लागू किए जाते हैं।
  उदाहरण के लिए, आप स्क्रीन पर बने रहने के लिए एनीमेशन की अंतिम स्थिति सेट कर सकते हैं, या एनीमेशन शुरू होने से पहले इसे वापस स्विच करने के लिए सेट कर सकते हैं।
• animation-play-state: एनीमेशन को रोकें / चलायें।

इन उप-गुणों का उपयोग तब किया जा सकता है:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

इनमें से प्रत्येक उप-गुण को मानने की पूरी सूची यहां दी जा सकती है:

animation-timing-function	सहजता, सहजता, सहजता, सहजता, सहजता, रैखिक, घन-बेज़ियर (X1, y1, x2, y2) (जैसे क्यूबिक-बेज़ियर (0.5, 0.2, 0.3, 1.0))
animation-duration	Xs या Xms
animation-delay	Xs या Xms
animation-iteration-count	एक्स
animation-fill-mode	आगे, पीछे, दोनों, कोई नहीं
animation-direction	सामान्य, वैकल्पिक
animation-play-state	रुका हुआ, दौड़ता हुआ, दौड़ता हुआ

कई कदम

यदि किसी एनिमेशन में समान आरंभ और समाप्ति गुण हैं, तो यह अल्पविराम से अलग है 0% और 100% मानों के अंदर @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

एकाधिक एनिमेशन

आप एक चयनकर्ता पर कई एनिमेशन घोषित करने के लिए मानों को अलग कर सकते हैं। नीचे दिए गए उदाहरण में, हम सर्कल के रंग को एक @keyframewhilst में बदलना चाहते हैं और इसे दूसरे पक्ष के साथ साइड से भी कर सकते हैं।

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

प्रदर्शन

अधिकांश संपत्तियों को एनिमेट करना एक प्रदर्शन चिंता का विषय है, इसलिए हमें किसी भी संपत्ति को एनिमेट करने से पहले सावधानी से आगे बढ़ना चाहिए। हालांकि, ऐसे कुछ संयोजन हैं जो सुरक्षित रूप से एनिमेटेड हो सकते हैं:

• transform: translate()
• transform: scale()
• transform: rotate()
• opacity

कौन से गुण एनिमेटेड हो सकते हैं?

एमडीएन में सीएसएस गुणों की एक सूची है जो एनिमेटेड हो सकती है। एनिमेटेड गुण रंग और संख्या में होते हैं। एक गैर-संजीदा संपत्ति का एक उदाहरण है background-image।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
4 *	5 *	१०	१२	5.1 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4 *	6.0-6.1 *

अधिक जानकारी

• एमडीएन पर एनीमेशन
• सीएसएस एनिमेशन का उपयोग करना
• W3C पर एनीमेशन
• बेहतर रेंडरिंग प्रदर्शन के लिए जंक बस्टिंग
• काम पर वेब एनीमेशन
• जिम्मेदारी से चेतन करने के पांच तरीके
• स्टेट जंपिंग, नेगेटिव डिले, ओरिजिनेटिंग ओरिजिन, एंड मोर
• सीएसएस एनिमेशन मिड-वे शुरू करना
• उच्च प्रदर्शन एनिमेशन