MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Think of an Indian school's Annual Day cultural performance. A classical dance routine or theatrical play is not just an abrupt switch from "start" to "end." Instead, the choreographer plans exact milestones across the musical soundtrack:
0%: The curtains rise; performers stand motionless in position.25%: Dancers glide across to stage left.50%: The tempo peaks; acrobatic turns take center stage.75%: Dancers regroup in a central pyramid formation.100%: The final grand salute as the audience applauds.In CSS, the @keyframes rule is your master director's script. In this chapter, we will master multi-stop milestone timelines, chaining multiple animation tracks simultaneously, mastering animation-fill-mode, and controlling playback states directly through CSS.
While beginner CSS tutorials often rely on simple from (0%) and to (100%) transitions, professional motion design requires non-linear, multi-milestone timelines:
+-------------------------------------------------------------------------+
| THE MULTI-STAGE @KEYFRAMES TIMELINE |
+-------------------------------------------------------------------------+
0% 25% 50% 75% 100%
[REST] ----> [LIFT & TILT] ----> [SCALE EXPAND] ---> [ROTATE] ---> [RESTORE]
| | | | |
v v v v v
scale(1) translateY(-20px) scale(1.15) rotate(5deg) scale(1)
rotate(-4deg) box-shadow glow translateY(0)By adding a gentle overshoot at 40% and a tiny settle at 70%, animations feel organic, lively, and physical rather than mechanical.
animation-fill-modeOne of the most frequent beginner complaints is:
This behavior is dictated by animation-fill-mode:
| Value | Before Animation Starts (During Delay) | After Animation Completes |
|---|---|---|
none (Default) | Element retains default CSS styles | Element snaps back immediately to default CSS styles |
forwards | Element retains default CSS styles | Element permanently freezes at the final keyframe (100%)! |
backwards | Element immediately applies the 0% keyframe styles during delay | Element snaps back to default CSS styles |
both | Applies 0% styles during delay | Freezes at 100% styles after completion |
An element is not limited to a single animation. You can compose complex behaviors by chaining multiple comma-separated animations on the same selector, each running on its own independent timeline, duration, and easing function:
animation-play-stateDid you know you can pause and resume running CSS animations without resetting their timer? The animation-play-state property accepts running or paused.
This is ideal for school news tickers, rotating banners, or carousel sliders where students hover to pause the movement:
alternate and alternate-reverseBy default, an infinite animation abruptly jumps from 100% back to 0% every cycle. Setting animation-direction: alternate; creates smooth, unbroken pendulums:
+-------------------------------------------------------------------------+ | NORMAL VS ALTERNATE ANIMATION CYCLES | +-------------------------------------------------------------------------+ normal: [0% --------> 100%] JUMP [0% --------> 100%] JUMP [0% --------> 100%] (Jarring reset!) alternate: [0% --------> 100%] <-------- [0% --------> 100%] <-------- [0%] (Graceful, continuous, frictionless looping!)
In modern CSS, you can inject CSS custom properties directly inside @keyframes. This allows you to write a single reusable keyframe definition that behaves differently across various components:
| Practice | Bad Approach | Good Approach | Why It Matters |
|---|---|---|---|
| Animation Snap-back | Leaving animation-fill-mode omitted on one-shot entrance animations | Setting animation-fill-mode: forwards; or both; | Prevents the element from flashing back to hidden/shifted state upon completion. |
| Hover Pausing | Removing the animation class on hover (which resets the timer to 0) | Setting animation-play-state: paused; | Freezes the animation gracefully in place; un-freezes seamlessly upon mouse leave. |
| Smooth Looping | Leaving infinite linear loops to snap abruptly | Using animation-direction: alternate; with ease-in-out | Creates continuous, organic visual rhythms without jarring jump-cuts. |
| Keyframe Duplication | Copying 10 identical @keyframes with slight pixel variations | Using CSS custom properties (var(--distance)) inside one master @keyframes | Drastically reduces stylesheet weight and improves maintainability. |
25%, 50%, 75%) with small overshoots for realistic physical weight.animation-fill-mode: both: Applies the 0% styles during delay AND freezes the element at 100% styles upon completion.animation: float 3s infinite, glow 1.5s infinite;).animation-play-state: Toggle between running and paused for user interaction controls.var(--custom)) into @keyframes for customizable motion paths.animation-fill-mode ensures an element retains its final 100% keyframe styles after the animation finishes playing?animation-fill-mode: both; when an animation also has an animation-delay: 1s;?animation-direction: alternate; do during an infinite animation?spin and pulse) to the same HTML element?Build an interactive school announcement ticker with multi-stage pulsating glow and pause-on-hover capability.
@keyframes pulse-alert timeline that scales the card slightly at 50% and emits an expanding emerald glow shadow.animation: float-pill 3s ease-in-out infinite alternate).animation-play-state: paused; on :hover so students can pause the floating effect while reading.Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.