CSS के साथ एनिमेशन बनाना बहुत आसान है। और मजेदार बात यह है कि आपको किसी थर्ड-पार्टी फ्रेमवर्क या प्लगइन्स की आवश्यकता नहीं है।
@keyframes CSS नियम एक ऐसा टूल है जिसे हमें इन एनिमेशन को बनाने के लिए अपनी बेल्ट के नीचे रखने की आवश्यकता है।
@keyframes सिंटैक्स
@keyframes एक CSS at-rule है। At-rules बताते हैं कि CSS को कैसे व्यवहार करना चाहिए। @viewport, @supports जैसे कई अन्य at-rules हैं।
हम निम्न सिंटैक्स के साथ एक @keyframes नियम को परिभाषित करते हैं।
@keyframes <name> { from { /* start details here */ } to { /* end details here */ } }
हम कीवर्ड के बजाय प्रतिशत निर्दिष्ट करके अधिक परिष्कृत एनिमेशन घोषणाएं प्राप्त कर सकते हैं।
@keyframes <name> { 0% { } 50% { } 100% { } }
नोट: हमारे नव निर्मित keyframe का उपयोग करने के लिए हमें इसे animation-name प्रॉपर्टी के मान के रूप में जोड़ना होगा। हम animation-duration को भी सेट कर सकते हैं ताकि हमारे घोषित @keyframes एनिमेशन की अवधि निर्दिष्ट हो सके।
मैजिक बॉल उदाहरण
आइए आगे बढ़ते हैं और एक मैजिक बॉल बनाते हैं जो प्रकट होती है और गायब हो जाती है। यदि आप किसी भी बिंदु पर खो जाते हैं तो साथ में Codepen देखें।
पहली चीज़ जो हमें करने की आवश्यकता है वह है अपनी एनिमेशन को परिभाषित करना। हम इसे magic-ball नाम देंगे:
@keyframes magic-ball { from { background-color: limegreen; } to { background-color: blueviolet; } }
यहां मूल रूप से हम बैकग्राउंड रंग को limegreen से blueviolet में बदल रहे हैं। इसे किसी भी एलिमेंट पर लागू किया जा सकता है, लेकिन हम इसे एक सर्कल पर लागू करेंगे।
.circle { width: 10rem; height: 10rem; border-radius: 50%; animation-name: magic-ball; animation-duration: 4s; }
मत भूलें कि हमारे keyframe एनिमेशन के काम करने के लिए हमें इसे animation-name प्रॉपर्टी के मान के रूप में जोड़ना होगा और animation-duration का उपयोग करके सेकंड में एनिमेशन अवधि सेट करनी होगी।
इस एनिमेशन के साथ, अब हमारी बॉल प्रकट हो रही है और गायब हो रही है!💥
फ्लैश सेल उदाहरण
आइए आगे बढ़ते हैं और एक और एनिमेशन बनाते हैं। इस बार हम एक वर्ग को एनिमेट करेंगे और एक मूविंग इफेक्ट बनाएंगे। हम अपनी एनिमेशन का नाम moveIn रखेंगे और इस मामले में हम प्रतिशत का उपयोग करेंगे।
@keyframes moveIn { 0% { opacity: 0; transform: translateY(3rem); } 100% { opacity: 1; transform: translate(0); } }
Opacity हमारी पारदर्शिता है। इसलिए हम इस नव निर्मित एनिमेशन को अपने वर्ग पर लागू कर सकते हैं
.square { width: 10rem; height: 10rem; background-color: greenyellow; animation-name: moveIn; animation-duration: 4s; }
आप देख सकते हैं कि कैसे बहुत कम के साथ हमने एक बढ़िया प्रभाव प्राप्त किया है!
निष्कर्ष
आप CSS डॉक्यूमेंटेशन पर एनिमेशन पढ़कर एनिमेशन पर अपनी यात्रा जारी रख सकते हैं। यह भी ध्यान दें, हमने केवल अपनी एनिमेशन को परिष्कृत करने के एक तरीके का उल्लेख किया है जिसकी अवधि का उपयोग करके। देखने लायक कई और एनिमेशन सब-प्रॉपर्टीज हैं!
अंत में, ध्यान रखें कि सभी प्रॉपर्टीज को एनिमेट नहीं किया जा सकता। एनिमेटेबल प्रॉपर्टीज की इस संपूर्ण सूची को देखें।
