css-animations-hover

A from-scratch reference for motion in pure CSS — every concept paired with real, copy-ready code. This skill covers the mechanics and the decision framework. For taste-level judgment — when motion should confirm vs perform, matching motion to a component's mood — defer to the design-taste skill. The easing curves used throughout (cubic-bezier(0.22, 1, 0.36, 1) for entrances, cubic-bezier(0.34, 1.56, 0.64, 1) for spring) come from there.

All colour examples use neutral tokens (--accent, --ink, rgba(0,0,0,…) shadows) so they drop into any palette.

See also VOCABULARY.md — a glossary of named animation patterns (stagger, origin-aware, crossfade, spring, rubber-banding…) for describing precisely what you want.

The decision framework and several principles below build on Emil Kowalski's design-engineering work — animations.dev.