@keyframes Deep Dive: Complex Choreography and Multi-Stage Timelines

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:

• At 0%: The curtains rise; performers stand motionless in position.
• At 25%: Dancers glide across to stage left.
• At 50%: The tempo peaks; acrobatic turns take center stage.
• At 75%: Dancers regroup in a central pyramid formation.
• At 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.

1. Multi-Stage Timeline Architecture

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.

2. Decoded: The Crucial animation-fill-mode

One of the most frequent beginner complaints is:

This behavior is dictated by animation-fill-mode:

3. Simultaneous Multi-Track Animations

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:

4. Interactive Control: animation-play-state

Did 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:

5. Direction Cycling: alternate and alternate-reverse

By 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!)

6. CSS Variables Inside Keyframes

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:

7. Do's and Don'ts

8. Quick Revision Summary Cheat Sheet

• Multi-stop Timelines: Use intermediate percentages (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.
• Multi-track Chaining: Chain multiple independent animations separated by commas (animation: float 3s infinite, glow 1.5s infinite;).
• animation-play-state: Toggle between running and paused for user interaction controls.
• Dynamic Keyframes: Feed CSS custom properties (var(--custom)) into @keyframes for customizable motion paths.

Multiple Choice Questions

1. Which animation-fill-mode ensures an element retains its final 100% keyframe styles after the animation finishes playing?

A. none B. backwards C. forwards D. paused Answer: C Explanation: animation-fill-mode: forwards instructs the browser to persist the computed styles from the final keyframe after the animation finishes.

2. What is the effect of setting animation-fill-mode: both; when an animation also has an animation-delay: 1s;?

A. The animation is canceled B. The element applies the 0% keyframe styles immediately during the 1-second delay, and freezes at 100% styles after completion C. The element blinks twice before starting D. The delay is multiplied by 2 Answer: B Explanation: both combines backwards (applying 0% styles during the delay period) and forwards (retaining 100% styles after the animation ends).

3. How can you pause an ongoing marquee or carousel CSS animation when a student hovers their mouse over it?

A. animation: none; B. animation-play-state: paused; C. animation-duration: 0s; D. animation-direction: stop; Answer: B Explanation: animation-play-state: paused halts the animation at its current frame. When hover ends, setting it back to running resumes playback seamlessly.

4. What does animation-direction: alternate; do during an infinite animation?

A. It changes the background color randomly B. It alternates between playing forward (0% -> 100%) on odd iterations and backwards (100% -> 0%) on even iterations C. It plays the animation twice as fast D. It skips every second keyframe Answer: B Explanation: alternate causes the animation to reverse direction upon reaching the end, creating a smooth pendulum-like loop without abrupt restarts.

5. How do you apply two independent animations (e.g., spin and pulse) to the same HTML element?

A. Wrap the element in a second container B. Separate the two animation declarations with a comma: animation: spin 4s linear infinite, pulse 1.5s ease alternate; C. Write two separate style tags D. CSS prohibits applying multiple animations to a single element Answer: B Explanation: CSS animations support comma-separated lists of animations, allowing multiple independent timeline tracks to run concurrently on the same element.

Hands-on Practice Challenge

Build an interactive school announcement ticker with multi-stage pulsating glow and pause-on-hover capability.

Requirements:

1. 1
   Create a notification pill card with an alert icon and headline.
2. 2
   Build a multi-stage @keyframes pulse-alert timeline that scales the card slightly at 50% and emits an expanding emerald glow shadow.
3. 3
   Chain a secondary floating animation (animation: float-pill 3s ease-in-out infinite alternate).
4. 4
   Set animation-play-state: paused; on :hover so students can pause the floating effect while reading.

Complete Solution: