Learn CSS motion by changing it

Don't read about animation.
Grab it and tweak it.

Every card below is a live, editable demo of one technique. You trigger it — hover, click, hold, or toggle — and nothing plays on its own. Then edit the CSS on the right and it updates instantly. This is how you build a feel for easing, timing, and transforms: by changing a number and watching what happens.

Hover / click / hold the element Edit the CSS → applies live Try changing the ms and the easing ✓ Your changes save automatically

Code Dictionary

Plain-English meanings of every CSS word used in the labs. Anywhere you see a blue underlined word in an Explain panel, you can click it for this same definition.

Animation Vocabulary

The names for things — so you can describe exactly what you want when you build (or when you prompt an AI). This is the map; the labs above are the territory.

Principles to Know

The judgment that decides when and how much to animate — distilled from Emil Kowalski's writing.