08
CSS animations

CSS animations

Seven lessons on CSS motion as a UI tool. Transitions, transforms, keyframes, choreography, reduced-motion, and view transitions — built around when to animate and when not to.

~ 110 min·7 lessons·updated apr 2026

What you'll learn


Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

7 lessons · ~102 min total

  1. 01
    Why animate
    Motion as feedback, not decoration. Why a calmer page often beats a livelier one.
    10 min
  2. 02
    Transitions
    The transition shorthand, what's animatable, and easing curves explained without the calculus.
    15 min
  3. 03
    Transforms
    translate, scale, rotate. Why moving things with transform is cheap and moving with top is not.
    16 min
  4. 04
    Keyframe animations
    @keyframes and the animation shorthand. When a transition is not enough.
    17 min
  5. 05
    Choreography
    Delays, staggering, and custom easing. Making several pieces move together without looking robotic.
    16 min
  6. 06
    Prefers-reduced-motion
    The one accessibility rule animation engineers must internalize. Short on purpose.
    10 min
  7. 07
    View transitions
    The API that crossfades between page states. Where it shines and what breaks it.
    18 min

Prerequisites

  • · CSS fundamentals — the box model, units, custom properties

After this, try