📘 Lesson · Lesson 34
Animations with Keyframes
Keyframes से Animations
Animations vs Transitions — what's the difference?
You learned transitions animate a change between TWO states (normal → hover). Animations go further: they can move through MANY steps, run automatically without any trigger, and loop forever. A transition needs something to change (like a hover); an animation can play on its own the moment the page loads and repeat endlessly. Think spinners that spin continuously, a pulsing "live" dot, text that fades in on load, a bouncing arrow. Anything that moves without the user doing something is an animation, not a transition.
The @keyframes Rule — defining the steps
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}An animation has two parts: defining it with
@keyframes, then applying it. This is the definition. @keyframes gives your animation a name (here slideIn) and describes what happens at each point. The simplest form uses from (the start) and to (the end) — here the element starts invisible and 30px lower, then ends fully visible in place, creating a "slide up and fade in" effect. You can also use percentages for more steps: 0%, 50%, 100% — letting you choreograph multi-stage animations. The @keyframes block just DEFINES the motion; it doesn't do anything until applied.Applying the Animation
.card {
animation: slideIn 0.6s ease;
/* │ │ │
name time timing */
}Once defined, you attach the animation to an element with the
animation property, naming your keyframes and setting how it plays. The shorthand mirrors transitions: animation: slideIn 0.6s ease means "play the slideIn keyframes over 0.6 seconds with an ease curve." The moment the element appears, the animation runs. That's the whole flow: define the motion in @keyframes, then trigger it by naming it in animation. This two-part structure is the heart of every CSS animation.Animation Properties — full control
.spinner {
animation-name: spin;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite; /* loop forever */
animation-delay: 0.2s; /* wait before starting */
animation-direction: alternate; /* reverse each other loop */
}
/* Shorthand for all of it: */
.spinner { animation: spin 1s linear infinite; }| Property | Controls |
|---|---|
| iteration-count | How many times (a number, or infinite) |
| delay | Wait time before it starts |
| direction | alternate = play forward then backward |
| fill-mode | forwards = keep the final state after ending |
The star property is
animation-iteration-count: infinite — it makes an animation loop forever, essential for spinners, pulsing effects, and looping backgrounds. alternate direction makes it play forward then reverse smoothly (great for a gentle back-and-forth pulse). The shorthand packs it all in one line: animation: spin 1s linear infinite is the classic loading spinner in a single declaration. These properties let you fine-tune exactly how an animation behaves.Practical Examples — the ones you'll actually use
/* 1. A loading spinner (rotate forever) */
@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }
/* 2. Fade in on page load */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero { animation: fadeIn 1s ease; }
/* 3. A gentle pulse (for a "live" dot or call-to-action) */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.dot { animation: pulse 2s ease infinite; }These three cover the vast majority of real-world animation needs. The spinner rotates 360° forever (note:
to alone is enough when starting from the default). The fade-in gently reveals content on load — a subtle touch of polish. The pulse uses percentage keyframes to grow and shrink repeatedly, drawing attention to a button or status dot. Master these patterns and you can build most of the motion you'll ever need. As always: keep animations tasteful — a little motion delights, too much distracts.Exam Corner
Q: Difference between animation and transition? Transition animates between two states on a trigger; animation can run automatically, use many steps, and loop.
Q: What are the two parts of a CSS animation? Defining it with @keyframes, then applying it with the animation property.
Q: How do you make an animation loop forever?
Q: Write a loading spinner in shorthand.
Q: What does animation-direction: alternate do? Plays the animation forward, then backward, on alternate cycles.
Q: What are the two parts of a CSS animation? Defining it with @keyframes, then applying it with the animation property.
Q: How do you make an animation loop forever?
animation-iteration-count: infinite;Q: Write a loading spinner in shorthand.
animation: spin 1s linear infinite; (with a spin keyframe rotating 360deg).Q: What does animation-direction: alternate do? Plays the animation forward, then backward, on alternate cycles.
Animations vs Transitions — फर्क क्या है?
आपने सीखा transitions दो states के बीच बदलाव animate करते हैं (normal → hover). Animations आगे जाते हैं: वे KAI steps से गुज़र सकते हैं, बिना किसी trigger के अपने आप चल सकते हैं, और हमेशा loop कर सकते हैं. Transition को बदलने के लिए कुछ चाहिए (जैसे hover); animation page load होते ही खुद चल सकता है और अंतहीन दोहरा सकता है. लगातार घूमते spinners, धड़कता "live" dot, load पर fade-in होता text, उछलता arrow सोचिए. जो कुछ भी user के कुछ किए बिना हिले वह animation है, transition नहीं.
@keyframes Rule — steps define करना
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Animation के दो हिस्से हैं:
@keyframes से define करना, फिर लगाना. यह definition है. @keyframes आपकी animation को नाम देता है (यहां slideIn) और हर बिंदु पर क्या होता है बताता है. सबसे सरल रूप from (शुरुआत) और to (अंत) use करता है — यहां element invisible और 30px नीचे से शुरू होकर, पूरी तरह visible अपनी जगह पर खत्म होता है, "slide up और fade in" effect बनाते. ज़्यादा steps के लिए percentages भी use कर सकते हैं: 0%, 50%, 100% — multi-stage animations choreograph करने देते. @keyframes block बस motion DEFINE करता है; लगाए बिना कुछ नहीं करता.Animation लगाना
.card {
animation: slideIn 0.6s ease;
/* │ │ │
name time timing */
}Define होने के बाद, आप animation को element से
animation property से जोड़ते हैं, अपने keyframes को नाम देते और यह कैसे चले set करते. Shorthand transitions जैसा: animation: slideIn 0.6s ease मतलब "slideIn keyframes को ease curve के साथ 0.6 सेकंड में चलाओ." जिस पल element दिखता है, animation चलती है. वही पूरा flow: motion को @keyframes में define करो, फिर उसे animation में नाम देकर trigger करो. यह दो-हिस्सा structure हर CSS animation का दिल है.Animation Properties — पूरा control
.spinner {
animation-name: spin;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite; /* hamesha loop */
animation-delay: 0.2s; /* shuru se pehle ruko */
animation-direction: alternate; /* har doosre loop me reverse */
}
/* Sab ke liye shorthand: */
.spinner { animation: spin 1s linear infinite; }| Property | Control करता है |
|---|---|
| iteration-count | कितनी बार (एक number, या infinite) |
| delay | शुरू होने से पहले wait time |
| direction | alternate = आगे फिर पीछे चलाओ |
| fill-mode | forwards = खत्म होने के बाद final state रखो |
Star property है
animation-iteration-count: infinite — यह animation को हमेशा loop कराता है, spinners, pulsing effects, और looping backgrounds के लिए ज़रूरी. alternate direction इसे आगे फिर smoothly reverse चलाता है (कोमल आगे-पीछे pulse के लिए बढ़िया). Shorthand सब एक line में समेटता है: animation: spin 1s linear infinite एक declaration में classic loading spinner है. ये properties आपको बारीकी से tune करने देती हैं animation कैसे व्यवहार करे.Practical Examples — जो असल में use करेंगे
/* 1. Loading spinner (hamesha rotate) */
@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }
/* 2. Page load par fade in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero { animation: fadeIn 1s ease; }
/* 3. Komal pulse ("live" dot ya call-to-action ke liye) */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.dot { animation: pulse 2s ease infinite; }ये तीन असली दुनिया की ज़्यादातर animation ज़रूरतें cover करते हैं. spinner हमेशा 360° घूमता है (note: default से शुरू करने पर अकेला
to काफी है). fade-in load पर content को कोमलता से प्रकट करता है — polish का subtle touch. pulse percentage keyframes से बार-बार बड़ा-छोटा होता है, button या status dot पर ध्यान खींचते. इन patterns को master कीजिए और आप ज़रूरत की ज़्यादातर motion बना सकते हैं. हमेशा की तरह: animations सुरुचिपूर्ण रखिए — थोड़ी motion आनंदित करती है, ज़्यादा distract करती है.Exam Corner
Q: Animation और transition में अंतर? Transition trigger पर दो states के बीच animate करता है; animation अपने आप चल सकता है, कई steps use करता, और loop करता है.
Q: CSS animation के दो हिस्से क्या हैं? @keyframes से define करना, फिर animation property से लगाना.
Q: Animation को हमेशा loop कैसे कराते हैं?
Q: Loading spinner shorthand में लिखिए.
Q: animation-direction: alternate क्या करता है? Animation को आगे, फिर पीछे, बारी-बारी cycles में चलाता है.
Q: CSS animation के दो हिस्से क्या हैं? @keyframes से define करना, फिर animation property से लगाना.
Q: Animation को हमेशा loop कैसे कराते हैं?
animation-iteration-count: infinite;Q: Loading spinner shorthand में लिखिए.
animation: spin 1s linear infinite; (360deg घूमते spin keyframe के साथ).Q: animation-direction: alternate क्या करता है? Animation को आगे, फिर पीछे, बारी-बारी cycles में चलाता है.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.