Chapter 14 — CSS Motion

Connect state changes, transform rendered boxes, and describe simple multi-step animation while respecting motion preferences.

New concepts

Transition properties and timing, translate, scale, rotate, transform origin and function order, keyframes, animation controls, and reduced-motion preferences.

Read the Phase 10 gauge

What changes after Tables and Lists?

Earlier chapters establish meaningful structure, accessible interaction, and responsive presentation. This chapter adds motion as optional feedback and emphasis without changing source order, document meaning, or access to content.

Lessons

  1. 1. Smooth state changes with transitions
  2. 2. Translate, scale, and rotate
  3. 3. Keyframes and basic animation

Checkpoint

Create one link or button with equivalent transitioned hover and focus states, demonstrate translate, scale, and rotate without accidental overlap, and build one finite keyframe animation whose final meaning remains clear when reduced motion is requested.