ऐनिमेशन

The CSS Podcast - 022: ऐनिमेशन

कभी-कभी आपको इंटरफ़ेस पर सहायता करने वाले छोटे-छोटे आइकॉन दिखते हैं. इन पर क्लिक करने पर, आपको उस सेक्शन के बारे में काम की जानकारी मिलती है. इनमें अक्सर एक ऐसा ऐनिमेशन होता है जो आपको यह बताता है कि जानकारी मौजूद है और उससे इंटरैक्ट किया जाना चाहिए. इस मॉड्यूल में, सीएसएस का इस्तेमाल करके, हेल्पर और अन्य ऐनिमेशन बनाने का तरीका बताया गया है.

कीवर्ड के साथ ऐनिमेशन सीक्वेंस सेट करने के लिए, सीएसएस का इस्तेमाल किया जा सकता है. ये सिलसिले, एक स्टेटस वाले बुनियादी ऐनिमेशन या समय के हिसाब से चलने वाले जटिल सिलसिले हो सकते हैं.

मुख्य फ़्रेम क्या होता है?

ज़्यादातर ऐनिमेशन टूल में, टाइमलाइन पर टाइमस्टैंप को ऐनिमेशन की स्थितियां असाइन करने के लिए, मुख्य फ़्रेम का इस्तेमाल किया जाता है.

उदाहरण के लिए, यहां पल्से करने वाले "हेल्पर" बिंदु की टाइमलाइन दी गई है. ऐनिमेशन एक सेकंड तक चलता है और इसमें दो स्टेटस होते हैं.

इनमें से हर ऐनिमेशन स्टेटस की शुरुआत और खत्म होने का एक खास समय होता है. इन्हें टाइमलाइन पर मुख्य फ़्रेम की मदद से मैप किया जाता है.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

सीएसएस @keyframes ऐनिमेशन मुख्य फ़्रेम के उसी कॉन्सेप्ट पर आधारित हैं.

यहां दो स्थितियों वाला एक उदाहरण दिया गया है:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

पहला अहम हिस्सा, मुख्य फ़्रेम के नियम का नाम होता है. इसे कस्टम आइडेंटिफ़ायर (custom-ident) कहा जाता है. इस उदाहरण में आइडेंटिफ़ायर my-animation है. कस्टम आइडेंटिफ़ायर, फ़ंक्शन के नाम की तरह काम करता है. इससे आपको अपने सीएसएस कोड में, मुख्य फ़्रेम के नियम का रेफ़रंस कहीं भी देने में मदद मिलती है.

ध्यान दें: सीएसएस में कई जगहों पर <custom-ident> का इस्तेमाल किया जाता है, ताकि आप चीज़ों के लिए अपना नाम दे सकें. ये आइडेंटिफ़ायर केस-सेंसिटिव होते हैं. साथ ही, कुछ मामलों में ऐसे शब्द होते हैं जिनका इस्तेमाल नहीं किया जा सकता. उदाहरण के लिए, CSS Grid में लाइनों के नाम देते समय, span शब्द का इस्तेमाल नहीं किया जा सकता.

मुख्य फ़्रेम के नियम में, from और to ऐसे कीवर्ड हैं जो 0% और 100% को दिखाते हैं. ये कीवर्ड, ऐनिमेशन की शुरुआत और आखिर को दिखाते हैं. इस नियम को फिर से इस तरह से बनाया जा सकता है:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

समयसीमा के दौरान, जितनी चाहें उतनी पोज़िशन जोड़ी जा सकती हैं. हिलते-डुलते रंगों के हेल्पर उदाहरण में, दो स्थितियां हैं जो दो कीफ़्रेम में बदल जाती हैं. इसका मतलब है कि आपके पास कीफ़्रेम के नियम में दो पोज़िशन हैं, ताकि इनमें से हर कीफ़्रेम के लिए बदलावों को दिखाया जा सके.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation प्रॉपर्टी

Browser Support

• 43
• 12
• 16
• 9

Source

सीएसएस नियम में @keyframes का इस्तेमाल करने के लिए, अलग-अलग ऐनिमेशन प्रॉपर्टी तय की जा सकती हैं या animation शॉर्टहैंड प्रॉपर्टी का इस्तेमाल किया जा सकता है.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-duration: 10s;
}

animation-duration प्रॉपर्टी से यह तय होता है कि @keyframes टाइमलाइन की समयावधि कितनी होनी चाहिए. यह डिफ़ॉल्ट रूप से 0 सेकंड पर सेट होता है. इसका मतलब है कि ऐनिमेशन अब भी चलता रहेगा, लेकिन इसे देखने के लिए बहुत तेज़ होगा. समय की नेगेटिव वैल्यू का इस्तेमाल नहीं किया जा सकता.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

ऐनिमेशन में नैचुरल मोशन को फिर से बनाने के लिए, टाइमिंग फ़ंक्शन का इस्तेमाल किया जा सकता है. ये फ़ंक्शन, हर पॉइंट पर ऐनिमेशन की स्पीड का हिसाब लगाते हैं. कैलकुलेट की गई वैल्यू अक्सर घुमावदार होती हैं. इससे ऐनिमेशन, animation-duration के दौरान अलग-अलग स्पीड पर चलता है. साथ ही, अगर ब्राउज़र @keyframes में तय की गई वैल्यू से ज़्यादा वैल्यू का हिसाब लगाता है, तो एलिमेंट बाउंस करता हुआ दिखता है.

सीएसएस में प्रीसेट के तौर पर कई कीवर्ड उपलब्ध हैं. इनका इस्तेमाल, animation-timing-function की वैल्यू के तौर पर किया जाता है: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

आसानी से बदलने वाले फ़ंक्शन की वैल्यू, कर्व की तरह दिखती हैं. इसकी वजह यह है कि आसानी से बदलने वाले फ़ंक्शन की वैल्यू का हिसाब, बेज़ियर कर्व का इस्तेमाल करके लगाया जाता है. यह एक तरह का फ़ंक्शन है, जिसका इस्तेमाल वेग को मॉडल करने के लिए किया जाता है. ease जैसे टाइमिंग फ़ंक्शन वाले हर कीवर्ड में, पहले से तय किए गए बेज़ियर कर्व का रेफ़रंस दिया जाता है. सीएसएस में, cubic-bezier() फ़ंक्शन का इस्तेमाल करके, सीधे तौर पर बेज़ियर कर्व तय किया जा सकता है. यह फ़ंक्शन चार संख्या वाली वैल्यू स्वीकार करता है: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

ये वैल्यू, X और Y ऐक्सिस के साथ कर्व के हर हिस्से को प्लॉट करती हैं.

बेज़ियर कर्व को समझना मुश्किल है. विज़ुअल टूल बहुत मददगार होते हैं. जैसे, Lea Verou का यह जनरेटर.

steps easing फ़ंक्शन

कभी-कभी, आपको अपने ऐनिमेशन पर ज़्यादा बारीकी से कंट्रोल करने के लिए, कर्व के बजाय इंटरवल में मूव करना पड़ सकता है. steps() ईज़िंग फ़ंक्शन की मदद से, टाइमलाइन को एक जैसी अवधि के इंटरवल में बांटा जा सकता है.

.my-element {
    animation-timing-function: steps(10, end);
}

पहला आर्ग्युमेंट, चरणों की संख्या है. अगर चरण और मुख्य फ़्रेम की संख्या एक जैसी है, तो हर मुख्य फ़्रेम अपने चरण की पूरी अवधि के लिए क्रम में चलता है. इसमें स्टेटस के बीच कोई ट्रांज़िशन नहीं होता. अगर चरण की तुलना में कीवर्ड कम हैं, तो ब्राउज़र दूसरे आर्ग्युमेंट के आधार पर, कीवर्ड के बीच चरण जोड़ता है.

दूसरा आर्ग्युमेंट, दिशा है. अगर यह end पर सेट है, जो डिफ़ॉल्ट है, तो चरण आपकी टाइमलाइन के आखिर में पूरे हो जाते हैं. अगर यह start पर सेट है, तो ऐनिमेशन शुरू होते ही उसका पहला चरण पूरा हो जाता है. इसका मतलब है कि यह end से एक चरण पहले खत्म हो जाता है.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count प्रॉपर्टी से यह तय होता है कि ऐनिमेशन के दौरान @keyframes टाइमलाइन कितनी बार चलनी चाहिए. डिफ़ॉल्ट रूप से, यह 1 होता है. इसका मतलब है कि ऐनिमेशन आपकी टाइमलाइन के आखिर में पहुंचने पर रुक जाता है. यह वैल्यू, नेगेटिव नंबर नहीं हो सकती.

ऐनिमेशन को लूप में चलाने के लिए, दोहराए जाने की संख्या को infinite पर सेट करें. इस लेसन की शुरुआत में दिखने वाला, दिल की धड़कन दिखाने वाला ऐनिमेशन इस तरह काम करता है.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-direction: reverse;
}

animation-direction की मदद से, यह सेट किया जा सकता है कि टाइमलाइन आपके मुख्य फ़्रेम पर किस दिशा में चलेगी. यह एट्रिब्यूट, इन वैल्यू को स्वीकार करता है:

• normal: डिफ़ॉल्ट वैल्यू, जो फ़ॉरवर्ड है.
• reverse: आपकी टाइमलाइन पर पीछे की ओर चलता है.
• alternate: ऐनिमेशन के हर दोहराव के लिए, टाइमलाइन आगे और पीछे चलती है.
• alternate-reverse: alternate की तरह ही, लेकिन ऐनिमेशन, टाइमलाइन के पीछे की ओर चलने से शुरू होता है.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-delay: 5s;
}

animation-delay प्रॉपर्टी से यह तय होता है कि ऐनिमेशन शुरू करने से पहले, ब्राउज़र कितनी देर इंतज़ार करता है. animation-duration प्रॉपर्टी की तरह ही, यह समय की वैल्यू स्वीकार करती है.

animation-duration के उलट, animation-delay को नेगेटिव वैल्यू के तौर पर तय किया जा सकता है. इससे ऐनिमेशन, आपकी टाइमलाइन में उसी पॉइंट से शुरू हो जाता है. उदाहरण के लिए, अगर आपका एनिमेशन 10 सेकंड का है और आपने animation-delay को -5s पर सेट किया है, तो एनिमेशन आपकी टाइमलाइन के आधे हिस्से से शुरू होगा.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state प्रॉपर्टी की मदद से, ऐनिमेशन को चलाया और रोका जा सकता है. डिफ़ॉल्ट वैल्यू running है. इसे paused पर सेट करने पर, ऐनिमेशन रुक जाता है.

animation-fill-mode

Browser Support

• 43
• 12
• 16
• 9

Source

animation-fill-mode प्रॉपर्टी से यह तय होता है कि एनिमेशन शुरू होने से पहले या खत्म होने के बाद, आपकी @keyframes टाइमलाइन में कौनसी वैल्यू बनी रहेंगी. डिफ़ॉल्ट वैल्यू none है. इसका मतलब है कि एनिमेशन पूरा होने के बाद, आपकी टाइमलाइन में मौजूद वैल्यू हटा दी जाती हैं. दूसरे विकल्पों में ये शामिल हैं:

• forwards: ऐनिमेशन की दिशा के आधार पर, आखिरी कीफ़्रेम बना रहता है.
• backwards: ऐनिमेशन की दिशा के आधार पर, पहला कीफ़्रेम बना रहता है.
• both: पहला और आखिरी मुख्य फ़्रेम, दोनों बने रहते हैं.

animation का शॉर्टहैंड

हर प्रॉपर्टी को अलग से तय करने के बजाय, उन्हें animation शॉर्टहैंड में तय किया जा सकता है. इससे ऐनिमेशन प्रॉपर्टी को इस क्रम में तय किया जा सकता है:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

ऐनिमेशन के साथ काम करते समय ध्यान रखने वाली बातें

ऐप्लिकेशन और वेबसाइटों से इंटरैक्ट करते समय, उपयोगकर्ता अपने ऑपरेटिंग सिस्टम को कम मोशन पर सेट कर सकते हैं. prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल करके, इस प्राथमिकता का पता लगाया जा सकता है:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

हालांकि, इसका मतलब यह नहीं है कि आपको ऐनिमेशन नहीं चाहिए. इसमें कम ऐनिमेशन का इस्तेमाल किया जाता है. खास तौर पर, अचानक दिखने वाले ऐनिमेशन का इस्तेमाल कम किया जाता है. इस प्राथमिकता और पूरी परफ़ॉर्मेंस के बारे में ज़्यादा जानने के लिए, हमारी ऐनिमेशन गाइड पढ़ें.

देखें कि आपको क्या समझ आया

ऐनिमेशन के बारे में अपनी जानकारी की जांच करना

क्या @keyframes ऐनिमेशन का नाम या कस्टम आइडेंटिफ़ायर केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) है?

हां

🎉

नहीं

सीएसएस में, दो ऐनिमेशन का एक ही नाम नहीं हो सकता. हालांकि, SWOOP और swoop एक साथ इस्तेमाल किए जा सकते हैं.

from और to कीवर्ड, इनके जैसे ही हैं:

start और end.

फिर से कोशिश करें!

0% और 100%.

from और 0% एक जैसे हैं और to का मतलब 100% है.

0 और 1

फिर से कोशिश करें!

animation-timing-function को आम तौर पर इन नामों से भी जाना जाता है:

डाइनैमिक टाइमिंग

फिर से कोशिश करें!

देरी

फिर से कोशिश करें!

विश्राम

🎉

@keyframes ऐनिमेशन में कम से कम कितनी कीफ़्रेम की ज़रूरत होती है?

1

ब्राउज़र, एलिमेंट की मौजूदा स्थिति को कीफ़्रेम के तौर पर लेगा. इसलिए, कम से कम एक कीफ़्रेम ज़रूरी है.

2

फिर से कोशिश करें!

3

फिर से कोशिश करें!

4

फिर से कोशिश करें!