ऐनिमेशन

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

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

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

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

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

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

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

@keyframes

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

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

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

पहला अहम हिस्सा है कस्टम आइडेंटिफ़ायर (custom-ident), जो मुख्य-फ़्रेम के नियम का नाम है. इस उदाहरण में आइडेंटिफ़ायर 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;
}

animation-duration प्रॉपर्टी से यह तय होता है कि @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() फ़ंक्शन का इस्तेमाल करके, सीधे Bézier कर्व को तय किया जा सकता है. यह फ़ंक्शन चार संख्या वाली वैल्यू स्वीकार करता है: 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

.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 के उलट, animation-delay को नेगेटिव वैल्यू के तौर पर तय किया जा सकता है. इससे ऐनिमेशन, टाइमलाइन में सही समय पर शुरू होता है. उदाहरण के लिए, अगर आपका ऐनिमेशन 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: पहला और आखिरी मुख्य-फ़्रेम, दोनों काम करते हैं.

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

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

जांचें कि आपको कितना समझ आया

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