Transitions and animation

A transition animates a change between two states. It is the right tool for hover effects.

Keyframes

Use @keyframes when something should run by itself.

Animate transform and opacity where you can, because browsers run them smoothly. Respect readers who turn motion off by checking the prefers-reduced-motion media query.