CSS Keyframes — Bouncing Ball Animation बनाएँ

flipbook सोचिए: आप page के नीचे एक गेंद बनाते हैं, फिर थोड़ी ऊपर, फिर सबसे ऊपर — और जब pages को तेज़ी से पलटते हैं, गेंद उछलने लगती है। आपने बीच की हर position नहीं बनाई; आपकी आँखों ने उन्हें भर दिया। CSS keyframes बिल्कुल ऐसे ही काम करते हैं। आप ज़रूरी पल बताते हैं — शुरुआत, बीच, अंत — और browser बीच का सब कुछ खुद, आराम से, बना देता है।

Diagram — देखें, यह सब कैसे जुड़ता है

कीफ़्रेम और animation की properties

animation के दो हिस्से हैं। पहला, @keyframes rule, जो animation का नाम देता है और उसके stops गिनाता है। दूसरा, element पर animation properties, जो बताती हैं कौनसे keyframes चलाने हैं और कैसे: animation-name, animation-duration (एक run कितनी देर चलेगा), animation-timing-function (speed का curve), animation-delay (शुरू होने से पहले इंतज़ार), animation-iteration-count (कितनी बार — या infinite), animation-direction, और animation-fill-mode।

@keyframes bounce {
  0%   { top: 0; }
  50%  { top: 180px; }
  100% { top: 0; }
}
.ball { animation: bounce 2s ease-in-out infinite; }

shorthand animation: bounce 2s ease-in-out infinite; नाम, duration, timing function और iteration count को एक line में समेट देता है — वही order, जैसे लंबी properties का है।

from और to, या percentages

सादे animations from और to इस्तेमाल करते हैं — बस शुरुआत और अंत, जैसे लगभग अदृश्य से पूरा दिखने तक fade होना। जब बीच में stops चाहिए, percentages इस्तेमाल कीजिए: 0% शुरुआत है, 100% अंत है, और 50% आधा रास्ता है। ऊपर वाली उछलती गेंद तीन stops इस्तेमाल करती है: ऊपर, नीचे, ऊपर। Percentages से एक property दूसरी से अलग वक़्त पर भी बदल सकती है — रंग 25% पर बदल सकता है जबकि position 50% पर बदलती है।

animation बनाम transition

transition को trigger चाहिए — आम तौर पर hover — और वह दो states के बीच चलती है। animation को किसी trigger की ज़रूरत नहीं: page load होते ही खुद चलती है, उसके कई stops हो सकते हैं, और वह हमेशा दोहराती रह सकती है। इसलिए animations उन चीज़ों के लिए सही हैं जो खुद हिलनी चाहिए — उछलती गेंद, धड़कता notification dot, loading spinner — जबकि transitions hover effects के लिए सही रहती हैं।

आम गलतियाँ

• animation-duration भूलना — बिना duration के animation 0 second की होती है और कुछ होता हुआ दिखाई नहीं देता।
• keyframes का नाम animation-name से अलग लिखना — नाम बिल्कुल एक जैसे होने चाहिए, वरना browser को चलाने के लिए कोई animation नहीं मिलता।
• top या left को ऐसे element पर animate करना जो positioned नहीं है — वह properties सिर्फ़ position: relative, absolute, या fixed वाले elements को हिलाती हैं।
• यह उम्मीद करना कि element आख़िरी keyframe पर रुका रहेगा — बिना animation-fill-mode: forwards; के वह वापस अपनी आम style पर कूद जाता है।
• animation: infinite; अकेला लिखना — shorthand को कम से कम नाम और duration चाहिए; सिर्फ़ iteration count काफ़ी नहीं।

याद रखें

• @keyframes ज़रूरी stops गिनाता है; browser बीच का सब कुछ खुद बना देता है।
• from/to दो stops हैं; percentages जितने चाहिए उतने stops देते हैं।
• animation: नाम duration timing-function iteration-count; shorthand का order है।
• animations खुद चलती हैं; transitions को hover जैसे trigger की ज़रूरत होती है।
• animation-fill-mode: forwards; animation ख़त्म होने के बाद आख़िरी keyframe को बनाए रखता है।

उदाहरण समझिए

• @keyframes bounce { 0% { top: 0; } 50% { top: 180px; } 100% { top: 0; } } — गेंद शुरुआत में ऊपर है, आधे रास्ते नीचे जाती है, और अंत में वापस ऊपर आ जाती है।
• .ball { animation: bounce 2s ease-in-out infinite; } — उछाल 2 second चलती है, आराम से शुरू और ख़त्म होती है, और हमेशा दोहराती है।
• @keyframes fadein { from { opacity: 0.2; } to { opacity: 1; } } — हरा box लगभग अदृश्य से पूरा दिखने तक fade होता है, सिर्फ़ दो stops से।
• .fade-box { animation: fadein 3s ease-in-out infinite alternate; } — fade 3 second चलता है और आगे फिर पीछे खेलता है, इसलिए कभी एकदम नहीं कूदता।
• .ball { position: absolute; } — गेंद सफ़ेद stage के अंदर positioned है, इसलिए top animate करने पर वह हिलती भी है।