CSS एनिमेशन
Transitions ने सिखाया ट्रिगर पर A → B। Transforms ने सिखाया पेंट की गई box कहाँ जाती है। Animations एक टाइमलाइन लिखती हैं: status dot पर pulse, loader को लगातार घुमाना, cards को एक-एक करके अंदर लाना — @keyframes से स्टेप और animation से चलाना।
एनिमेशन क्या है
दो हिस्से: नाम वाला keyframe सेट (@keyframes) जो प्रतिशत (या from / to) पर styles सूचीबद्ध करता है, और rule जो duration, वैकल्पिक delay, iteration count, direction, timing function और fill-mode के साथ उस नाम को चलाता है। ब्राउज़र keyframe stops के बीच interpolate करता है।
नाम मिलान सख्त है: animation-name: pulse तभी चलेगा जब @keyframes pulse मौजूद हो। एक को बदलें, दूसरे को नहीं — कुछ हिलेगा नहीं।
एनिमेशन नियंत्रण — एक नज़र में
📊 मुख्य animation हिस्से
| हिस्सा | भूमिका |
|---|---|
@keyframes name { … } |
% / from / to पर property values की टाइमलाइन |
animation-name |
कौन सा keyframe सेट चले |
animation-duration |
एक चक्र कितनी देर (s या ms) |
animation-timing-function |
चक्र के अंदर easing (ease, linear, …) |
animation-delay |
पहले चक्र से पहले इंतज़ार |
animation-iteration-count |
कितने चक्र (number या infinite) |
animation-direction |
normal, reverse, alternate, alternate-reverse |
animation-fill-mode |
पहले/बाद styles (none, forwards, backwards, both) |
animation shorthand |
name → duration → timing → delay → iteration → direction → fill-mode (आम क्रम) |
हर longhand एक साथ ज़रूरी नहीं। name + duration से शुरू करें; loaders के लिए infinite, bounce-back के लिए alternate, और जब आखिरी keyframe टिकनी हो forwards।
पहली टाइमलाइन — शांत pulse
Opacity और transform paint-friendly रहते हैं। हल्का pulse पहले @keyframes अभ्यास का क्लासिक है।
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.55;
transform: scale(0.92);
}
}
.status-dot {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #16a34a;
animation: pulse 1.4s ease-in-out infinite;
}
0% और 100% मेल खाते हैं ताकि loop साफ़ जुड़े। infinite चक्र चलाता रहता है — छोटे status indicator के लिए ठीक, पूरे page hero पर शोर हो सकता है।
अनंत spin — loaders को linear पसंद
linear और infinite के साथ rotation लगातार spinner जैसा लगता है। reduced-motion fallback रखें जो spin छुपाए या रोक दे।
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loader {
width: 2rem;
height: 2rem;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.loader {
animation: none;
border-top-color: #e5e7eb;
}
}
to का मतलब 100% है। default 0% (कोई transform नहीं) से शुरू करना काफ़ी है जब सिर्फ़ घुमाव का अंत मायने रखता हो।
Delay और stagger — वही keyframes, अलग शुरुआत
एक keyframe सेट कई elements चला सकता है। animation-delay से stagger करें — list क्रमिक लगे, तीन अलग animations लिखे बिना।
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal-list li {
opacity: 0;
animation: fade-up 0.45s ease forwards;
}
.reveal-list li:nth-child(1) { animation-delay: 0s; }
.reveal-list li:nth-child(2) { animation-delay: 0.08s; }
.reveal-list li:nth-child(3) { animation-delay: 0.16s; }
forwards चक्र खत्म होने के बाद आखिरी keyframe styles रखता है — इसके बिना items base rule की opacity: 0 पर वापस snap हो सकते हैं। यहीं animation-fill-mode असली काम करता है।
one-shot entrance पर fill-mode
Entrance motion अक्सर एक बार चलती है। fill-mode तय करता है delay से पहले और आखिरी frame के बाद styles लागू हों या नहीं।
@keyframes card-in {
from {
opacity: 0;
transform: translateY(1rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.card-enter {
animation: card-in 0.5s ease 0.1s both;
}
Shorthand: name card-in, duration 0.5s, easing ease, delay 0.1s, fill-mode both. both delay के दौरान पहली keyframe लगाता है और बाद में आखिरी keyframe थामे रहता है।
Direction, play state, और कब animate न करें
animation-direction: alternate से विषम चक्र आगे, सम चक्र पीछे — keyframes दोहराए बिना हल्का bounce। animation-play-state: paused चल रही animation रोक देता है (decorative loops पर hover pause के लिए उपयोगी)।
साधारण hover रंग बदलाव के लिए transitions रखें। loops, multi-step कहानी, या ऐसी motion जो single state toggle से बंधी न हो — तब animations। keyframes में transform और opacity पसंद करें; width, height, top animate करना भारी है और layout अक्सर jitter करता है।
खुद try
- सिर्फ़ opacity पर तीन stops (
0%/50%/100%) वाला pulse बनाएं; फिर छोटाscaleजोड़ें। spin+linear+infiniteसे spinner;easeपर switch करके uneven feel देखें।- वही
fade-upkeyframes और0s,0.1s,0.2sdelays से तीन badges stagger —forwardsके साथ/बिना compare। - panel पर shorthand
animation: card-in 0.5s ease 0.15s both;bothहटाकर snap-back देखें। prefers-reduced-motion: reduceमें decorative loops परanimation: none(या एक छोटा fade)।
आम गलतियाँ
- hover A→B fade से «loop» की उम्मीद — वह animation का काम है, अकेले transition का नहीं
animation-nameऔर@keyframesनाम में typo — चुपचाप कुछ नहीं होता- बड़े, ध्यान खींचने वाले क्षेत्रों पर
infiniteबिना pause या reduced-motion रास्ते के - transform/opacity से हो सकता हो तब भी layout properties (
width,margin,top) animate करना - base rule में
opacity: 0से शुरू one-shot reveals परforwards/bothछोड़ना
सार
@keyframesटाइमलाइन define;animation(या longhands) चलाते हैं- loops, bounce-back, stagger, sticky ends — iteration, direction, delay, fill-mode
- transform/opacity पसंद; decorative motion पर prefers-reduced-motion मानें
- साधारण state changes — transitions; multi-step और repeating — animations
- Effects & Motion में अगला: CSS Filters
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी