ऐनिमेशन

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

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

पल् सिंग आइकॉन यह पक्का करने का एक तरीका है कि आपके उपयोगकर्ता अहम जानकारी पर ध्यान दें.

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

कीफ़्रेम क्या है?

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

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

एक सेकंड की अवधि में पल्सर ऐनिमेशन की स्थितियां
पल्सिंग ऐनिमेशन की स्थितियां.

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

पहले जैसा ही डायग्राम, लेकिन इस बार कीफ़्रेम के साथ
कीफ़्रेम के साथ पल्सिंग ऐनिमेशन.

@keyframes

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

सीएसएस @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;
  }
}
pulse नियम में बदलाव करके देखें कि ऐनिमेशन बदलाव.

animation प्रॉपर्टी

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

animation-duration

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

animation-timing-function

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

ऐनिमेशन में नैचुरल मोशन फिर से बनाने के लिए, टाइमिंग फ़ंक्शन का इस्तेमाल किया जा सकता है हर बिंदु पर एनिमेशन की गति की गणना करें. कैलकुलेटेड वैल्यू अक्सर घुमावदार होता है, जिसकी वजह से ऐनिमेशन 30 मिनट में अलग-अलग स्पीड पर चलता है 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 ऐक्सिस पर प्लॉट करती हैं.

प्रोग्रेस बनाम टाइम चार्ट पर बेज़ियर कर्व
बेज़ियर कर्व का एक उदाहरण.

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

steps इज़िंग फ़ंक्शन

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

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

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

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

ऐनिमेशन की तुलना चरणों के साथ और उनके बिना करें.

animation-iteration-count

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

इस ऐनिमेशन के लिए बार-बार दिए जाने वाले बदलावों की संख्या में बदलाव करके देखें.

अपने ऐनिमेशन को लूप में चलाने के लिए, इटरेशन की संख्या को infinite पर सेट करें. इस तरह इस लेसन की शुरुआत का पल्सिंग ऐनिमेशन काम करता है.

पल्सिंग ऐनिमेशन लगातार कई बार घूमता रहता है.

animation-direction

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

animation-delay

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

ऐनिमेशन में देरी को बदलकर देखें.

animation-play-state

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

ऐनिमेट किए गए एलिमेंट पर अपना कर्सर रखें ऐनिमेशन को रोकें.

animation-fill-mode

ब्राउज़र सहायता

  • Chrome: 43. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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
फिर से कोशिश करें!