ऐनिमेशन

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

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

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

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

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

इसके लिए, कॉन्टेक्स्ट के तौर पर "पल्सर" का इस्तेमाल करें. पूरा ऐनिमेशन 1 सेकंड तक चलता है और दो स्थितियों में चलता है.

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

@keyframes

अब आपको पता है कि मुख्य-फ़्रेम क्या है. इससे आपको यह समझने में मदद मिलेगी कि सीएसएस @keyframes नियम कैसे काम करता है. यहां एक बुनियादी नियम दिया गया है, जिसके दो स्टेटस हैं.

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

ध्यान देने वाला पहला हिस्सा कस्टम आईडी (कस्टम आइडेंटिफ़ायर) होता है या मानवीय शब्दों में मुख्य-फ़्रेम के नियम का नाम होता है. इस नियम का आइडेंटिफ़ायर my-animation है. कस्टम आइडेंटिफ़ायर, फ़ंक्शन के नाम की तरह काम करता है. इसकी मदद से, आपने फ़ंक्शन मॉड्यूल में किसी दूसरी जगह पर मुख्य-फ़्रेम नियम का इस्तेमाल किया.

मुख्य-फ़्रेम नियम में 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 प्रॉपर्टी

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

animation-duration

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

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

animation-timing-function

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

सीएसएस में, प्रीसेट के तौर पर ऐसे कई कीवर्ड उपलब्ध हैं जिनका इस्तेमाल ऐनिमेशन-समय-फ़ंक्शन: 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 eas फ़ंक्शन

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

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

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

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

animation-iteration-count

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

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

आपके पास infinite कीवर्ड का इस्तेमाल करने का विकल्प है, जो आपके ऐनिमेशन को लूप करेगा. इस लेसन की शुरुआत का "पल्सर" डेमो इसी तरह काम करता है.

animation-direction

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

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

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

animation-delay

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

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

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

animation-play-state

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

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

animation-fill-mode

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

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

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;
  }
}

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

आपने जो सीखा है उसकी जांच करें

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