कीफ्रेम्स और विभिन्न CSS एनिमेशन प्रॉपर्टीज़ का उपयोग करके शुद्ध CSS के साथ एक सिंपल एनिमेटेड बैकग्राउंड कलर लूप बनाना सीखें।
इस उदाहरण में, हम HTML <body> एलिमेंट को सीधे CSS के साथ टारगेट कर रहे हैं, लेकिन आप निम्नलिखित कोड उदाहरण को किसी भी HTML एलिमेंट, क्लास, या आईडी पर लागू कर सकते हैं।
कोड
आप इस डेमो को संदर्भ के रूप में उपयोग कर सकते हैं।
नोट: यह कोड IE9 में काम नहीं करेगा।
अपनी एनिमेशन की योजना बनाना
यहां तक कि यदि आप नहीं जानते कि आपका परिणाम वास्तव में कैसा होना चाहिए, तो आपके द्वारा जाने की दिशा के बारे में एक विचार रखना हमेशा व्यावहारिक होता है। कोडिंग शुरू करने से पहले लूपिंग एनिमेशन के बारे में कुछ चीज़ें स्थापित करते हैं:
- हम कितने बैकग्राउंड कलर्स का उपयोग करना चाहते हैं?
- कुल एनिमेशन अवधि कितनी लंबी होनी चाहिए?
- किस प्रकार के एनिमेशन टाइप का उपयोग करना चाहिए?
चूंकि इस ट्यूटोरियल का उद्देश्य चीजों को सरल रखना है, आइए उपयोग करें:
- 5 अलग-अलग बैकग्राउंड कलर्स
- 10 सेकंड की अवधि (प्रत्येक कलर 2 सेकंड के लिए प्रदर्शित होता है)
- एक लीनियर एनिमेशन कर्व (एनिमेशन की शुरुआत से अंत तक समान गति)
मैंने इस उदाहरण के लिए एक हार्मोनियस कलर पैलेट जल्दी से जेनरेट करने के लिए Coolers.co का उपयोग किया:
ये हेक्स कलर्स हैं जिनके माध्यम से हमारा आगामी बैकग्राउंड एनिमेशन लूप करेगा:
- सनसेट ऑरेंज:
#EE6055 - मीडियम एक्वामरीन:
#60D394 - पेल ग्रीन:
#AAF683 - मेलो येलो:
#FFD97D - विविड टैंगरीन:
#FF9B85
आपको उन सभी नामों को याद रखने की आवश्यकता नहीं है (वे सीधे कूलर्स से लिए गए हैं), मैंने उन्हें केवल अच्छे माप के लिए जोड़ा।
ठीक है, तो अब हमारे पास 5 कलर्स हैं, जिन्हें हम एक लूपिंग एनिमेशन में डालने जा रहे हैं जो प्रत्येक कलर को 2 सेकंड के लिए प्रदर्शित करता है।
अब हम अपनी योजना के आधार पर एनिमेशन बनाएंगे।
लूपिंग CSS एनिमेशन बनाना
CSS में, एनिमेशन कीफ्रेम्स 0% से 100% तक प्रतिशत में काम करते हैं। अपने स्टाइलशीट में निम्नलिखित CSS कीफ्रेम्स जोड़ें:
/* मानक सिंटैक्स */ @keyframes backgroundColorPalette { 0% { background: #ee6055; } 25% { background: #60d394; } 50% { background: #aaf683; } 75% { background: #ffd97d; } 100% { background: #ff9b85; } }अब हमारे पास backgroundColorPalette नामक एक कीफ्रेम्स प्रॉपर्टी है जिसमें 5 कलर अंतराल हैं, जो 0% से 100% तक एनिमेशन के समान रूप से विभाजित हैं।
अब बॉडी एलिमेंट के CSS नियम-सेट को बनाने का समय है, ताकि हम अपने कीफ्रेम्स कलर पैलेट को उपयोग में ला सकें।
अपने बॉडी सिलेक्टर नियम-सेट के अंदर निम्नलिखित CSS एनिमेशन प्रॉपर्टीज़ जोड़ें, और देखें कि आपके ब्राउज़र विंडो में क्या होता है:
body { animation-name: backgroundColorPalette; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: alternate; }यदि आपने सब कुछ सही किया, तो आपके पास अब एक लगातार चलने वाला बैकग्राउंड कलर एनिमेशन होना चाहिए जो 2 सेकंड के अंतराल पर कलर से कलर में सहजता से ट्रांज़िशन करता है।
कोड
आप इस डेमो को संदर्भ के रूप में उपयोग कर सकते हैं।
CSS कैसे काम करता है
- सबसे पहले, हम
animation-nameप्रॉपर्टी जोड़ते हैं और इसेbackgroundColorPaletteका मान देते हैं — अब हमने पहले बनाए गए बैकग्राउंड कलर कीफ्रेम्स को बॉडी एलिमेंट को असाइन कर दिया है। - हम
animation-duration:प्रॉपर्टी का उपयोग करते हैं और इसे 10s का मान देते हैं — अब हमारे एनिमेशन की कुल अवधि 10 सेकंड है। आप मिलीसेकंड10000का भी उपयोग कर सकते हैं। - हम
animation-iteration-countप्रॉपर्टी का उपयोग करते हैं और इसेinfiniteका मान देते हैं। यही एनिमेशन को लगातार लूप करता है। CSS में, डिफ़ॉल्ट1एनिमेशन साइकिल है। - हम
animation-directionप्रॉपर्टी का उपयोग करते हैं और इसेalternateका मान देते हैं। यह एनिमेशन को शुरुआत से अंत तक, और अंत से शुरुआत तक चलाता है। हम इस प्रॉपर्टी मान का उपयोग उस बदसूरत जंप से बचने के लिए करते हैं जो होता है यदि आपnormalएनिमेशन डायरेक्शन मान का उपयोग करते हैं।
जानने योग्य बातें
डिफ़ॉल्ट रूप से, CSS एनिमेशन स्पीड कर्व टाइप लीनियर पर सेट होता है। इसका मतलब है कि जब हम इसका उपयोग करना चाहते हैं तो हमें अपने CSS नियम-सेट में प्रॉपर्टी घोषित करने की आवश्यकता नहीं है। इसलिए हमारे पहले उदाहरण में एनिमेशन स्पीड कर्व लीनियरली चलता है।
हालांकि, आप अभी भी अपने कोड को अधिक अभिव्यंजक बनाने के लिए अपने CSS नियम-सेट में animation-timing-function: linear; जोड़ना चाह सकते हैं — विशेष रूप से यदि आप टीम में काम करते हैं। CSS में डिफ़ॉल्ट रूप से कौन सी प्रॉपर्टी मान सक्षम हैं, यह याद रखना कठिन है।
