ReviseAlgo Logo

Advanced CSS

Keyframes

Master CSS @keyframes, covering percentage stops, from/to rules, parameter overrides, and building complex multi-stage custom animations.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master writing CSS keyframe rules. By the end of this topic, you will be able to:

  • Declare custom keyframe animations using @keyframes.
  • Differentiate between simple from/to transitions and multi-stage percentage coordinates.
  • Apply timing-function overrides to individual keyframe segments.
  • Animate multiple CSS properties concurrently within keyframes.
  • Avoid naming conflicts when writing keyframe rules.

2. Overview

The @keyframes rule defines the steps of a CSS animation. By specifying styles at specific percentage points (from 0% start to 100% end), you have precise control over the middle steps of an animation, allowing you to build complex, multi-stage transitions that run automatically.

3. Why This Topic Matters

Keyframes are the engine behind custom CSS animations:

  • Precise timing controls: Unlike basic transitions, keyframes allow you to define what happens at specific points in an animation (e.g. at exactly 25% or 75%). This lets you build complex animations, like bouncing elements or multi-stage fade-ins.
  • Animation Performance: Animating properties that trigger layout reflows (like top or height) inside a looping keyframe animation will cause layout lag. Stick to animating transform and opacity.

4. Real-World Analogy

Think of a keyframe animation like **writing storyboard instructions for a cartoon flipbook**:

  • From / To (2-page drawing): Page 1 shows a ball on the ground; Page 2 shows the ball in the air. The animator fills in the intermediate frames.
  • Percentage Stops (Multi-stage storyboard):
    • 0%: Ball rests on the ground.
    • 30%: Ball rises and stretches.
    • 50%: Ball hits the ceiling and flattens.
    • 100%: Ball bounces back down to the ground.

5. Core Concepts

A keyframe animation is structured using percentages or keywords:

  • from / to keywords: Equivalent to 0% (start) and 100% (end). Useful for simple animations.
  • Percentage stops: Allow you to declare style changes at specific points in the animation (e.g. 25%, 50%, 75%).
  • Timing overrides: You can apply a unique animation-timing-function to a keyframe segment to change its acceleration curve mid-animation.
Stop Coordinate Keyword Option Standard Animation State
0% from The starting state of the animation.
50% - The midpoint state of the animation (often used for direction changes).
100% to The final state of the animation.

6. Syntax & API Reference

Below is a standard keyframe structure for a multi-stage bouncing animation:

7. Visual Diagram

This diagram displays how the browser navigates percentage stops inside keyframes:

8. Live Example — Full Working Code

A sample HTML document showcasing multi-stage bouncing and color pulse animations:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the 40% keyframe height parameter and observe the height of the bounce.
  2. Test how combining scale and translate properties inside keyframes affects the squash and stretch animation.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mismatched animation name reference Mispelling the animation name in the animation declaration, preventing the keyframes from loading. animation: slidein 1s; (mismatched) @keyframes slide-in {...}
animation: slide-in 1s;
Missing percentage units Forgetting to include percentage units (e.g. writing 50 instead of 50%) in keyframe selectors, causing the browser to ignore the rule. @keyframes fade { 50 { opacity: 0.5; } } @keyframes fade { 50% { opacity: 0.5; } }

11. Best Practices

  • Keep keyframe names descriptive and clean: Use descriptive, kebab-case names for keyframe blocks (e.g. @keyframes button-pulse-scale).
  • Animate performance-friendly properties: Stick to animating transform and opacity inside keyframes to keep rendering performance smooth.
  • Explicitly define starting and ending states: Define style changes at 0% and 100% to ensure animations transition smoothly.
  • Use relative units inside transform keyframes: Use relative percentage offsets inside translate transforms (e.g. translate(-50%, -50%)) to ensure animations adapt to different element sizes.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
@keyframes syntax rule mapping Supported (26+) Supported (16+) Supported (6.1+) Supported (12+)

13. Interview Questions

🟢 Q1: Can you declare a timing function inside a keyframe block? How does it behave?

Answer: Yes, you can declare an animation-timing-function inside an individual keyframe block. It overrides the animation's global timing function and applies to the animation segment between that keyframe and the next one.

14. Debugging Exercise

Explain why the load alert doesn't animate, and fix the CSS configuration:

View Solution

Diagnosis: The keyframe selectors omit the percentage units (e.g. 0, 50, 100). In CSS, keyframe selectors must include percentage units (except for the from and to keywords). Without units, the browser ignores the animation.

Fixed CSS:

15. Practice Exercises

Exercise 1: Pulsing Status Indicator

Build a green status circle badge. Write a keyframe animation that pulses the badge scale and adjusts its opacity in a looping animation to suggest an active connection.

16. Scenario-Based Challenge

The Multi-step Slide-In Dialogue Challenge:

A popup dialog modal needs a slide-in animation. When triggered, the modal should slide in from offscreen, bounce slightly, then fade in its text content. Propose a keyframes layout strategy using transform translations to build this multi-stage animation.

17. Quick Quiz

Q1: Which keyframe selector is equivalent to 100% in a CSS animation?

A) to

B) from

C) end

Answer: A — The 'to' keyword is equivalent to 100% in CSS keyframe animations.

18. Summary & Key Takeaways

  • • Use @keyframes to build complex, multi-stage animations.
  • • Make sure to include percentage units (e.g. 0%, 50%) in keyframe selectors.

19. Cheat Sheet

Syntax Target Visual Layout Action
@keyframes name { from {...} to {...} } Defines a simple two-stage animation from starting to ending state.