कीफ़्रेम और विभिन्न CSS एनिमेशन गुणों का उपयोग करके शुद्ध CSS के साथ एक साधारण एनिमेटेड पृष्ठभूमि रंग लूप बनाना सीखें।
इस उदाहरण में, हम HTML <body> . को लक्षित कर रहे हैं तत्व सीधे CSS के साथ, लेकिन आप निम्न कोड उदाहरण को किसी भी HTML तत्व, वर्ग या आईडी पर लागू कर सकते हैं।
कोड
आप इस डेमो को संदर्भ के रूप में उपयोग कर सकते हैं।
नोट:यह कोड IE9 में काम नहीं करेगा।
अपने एनिमेशन की योजना बनाना
यहां तक कि अगर आप नहीं जानते कि आपका परिणाम कैसे समाप्त होना चाहिए, तो आप जिस दिशा में जा रहे हैं, उसके बारे में विचार करना हमेशा व्यावहारिक होता है। कोडिंग शुरू करने से पहले आइए लूपिंग एनिमेशन के बारे में कुछ बातें स्थापित करें:
- हम कितने पृष्ठभूमि रंगों का उपयोग करना चाहते हैं?
- कुल एनिमेशन अवधि कितने समय तक चलनी चाहिए?
- हमें किस प्रकार के एनिमेशन का उपयोग करना चाहिए?
चूंकि इस ट्यूटोरियल का उद्देश्य चीजों को सरल रखना है, आइए इसका उपयोग करें:
- 5 अलग-अलग पृष्ठभूमि रंग
- 10 सेकंड की अवधि (प्रत्येक रंग 2 सेकंड प्रदर्शित होता है)
- एक रैखिक एनीमेशन वक्र (एनीमेशन की शुरुआत से अंत तक समान गति होती है)
मैंने इस उदाहरण के लिए जल्दी से एक सामंजस्यपूर्ण रंग पैलेट बनाने के लिए Coolers.co का उपयोग किया:
ये हेक्स रंग हैं जो हमारी आगामी पृष्ठभूमि एनीमेशन के माध्यम से लूप करेंगे:
- सूर्यास्त नारंगी:
#EE6055 - मध्यम एक्वामरीन:
#60D394 - पीला हरा:
#AAF683 - मधुर पीला:
#FFD97D - ज्वलंत कीनू:
#FF9B85
आपको उन सभी नामों को याद रखने की आवश्यकता नहीं है (वे सीधे कूलर से लिए गए हैं), मैंने उन्हें अच्छे उपाय के लिए जोड़ा है।
ठीक है, तो अब हमारे पास हमारे 5 रंग हैं, जिन्हें हम एक लूपिंग एनिमेशन में डालने जा रहे हैं जो प्रत्येक रंग को 2 सेकंड में प्रदर्शित करता है।
आगे हम अपनी योजना के आधार पर एनिमेशन बनाएंगे।
लूपिंग CSS एनिमेशन बनाना
CSS में, एनिमेशन कीफ़्रेम 0% . से प्रतिशत में काम करते हैं करने के लिए 100% . निम्नलिखित सीएसएस कीफ़्रेम जोड़ें:आपकी स्टाइलशीट में:
/* Standard syntax */
@keyframes backgroundColorPalette {
0% {
background: #ee6055;
}
25% {
background: #60d394;
}
50% {
background: #aaf683;
}
75% {
background: #ffd97d;
}
100% {
background: #ff9b85;
}
}
अब हमारे पास backgroundColorPalette . नामक एक keyframe संपत्ति है 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 एनिमेशन गति वक्र प्रकार रैखिक . पर सेट होता है . इसका मतलब यह है कि जब हम इसका इस्तेमाल करना चाहते हैं तो हमें अपने सीएसएस नियम-सेट में संपत्ति घोषित करने की ज़रूरत नहीं है। इसलिए हमारे उदाहरण में एनीमेशन गति वक्र रैखिक रूप से चलता है।
हालाँकि, आप अभी भी animation-timing-function: linear; add जोड़ना चाह सकते हैं अपने कोड को अधिक अभिव्यंजक बनाने के लिए अपने CSS नियम-सेट में - खासकर यदि आप एक टीम में काम करते हैं। यह याद रखना कठिन है कि CSS में सभी संपत्ति मान डिफ़ॉल्ट रूप से सक्षम हैं।