css-animation-cookbook
Thirty-one animations you can drop into production without
apologizing to your design team. Every demo is commented to teach the
technique, respects prefers-reduced-motion,
and animates only what browsers composite for free.
Hover micro-interactions 8 demos
Lift with directed shadow, center-out underline, shine sweep, rotating gradient border, icon nudge, JS-free 3D tilt, springy scale with linear() easing, ghost fill.
Browse hovers →Loaders & spinners 8 demos
Dual ring, orbital dots, material indeterminate bar, skeleton shimmer, SVG stroke spinner, typing dots, progress ring with a live counter() percentage, cube flip.
Browse loaders →Text effects 6 demos
Gradient shimmer, typewriter with steps() caret, word-by-word clip-path reveal, blur-in stagger, @property animated counter, and a glitch that knows when to stop.
Browse text effects →View transitions 5 demos
Fade-through, shared-axis horizontal, expand from card, circle reveal with clip-path, crossfade with scale. Two panels, one class flip — the CSS does the choreography.
Browse transitions →Skeleton states 4 demos
Article card, data table, profile and dashboard skeletons — shimmer sweep plus a pulse variant, and notes on when a skeleton beats a spinner (and when it doesn't).
Browse skeletons →House rules
- Compositor-only motion. transform, opacity, clip-path. Nothing here animates layout — no width, no top, no margin.
- Reduced motion is a feature. Every page resolves to a finished, legible state when the user opts out of animation.
- Comments teach. Each demo explains its one trick, so you can rebuild it from memory — not just paste it.
- Restraint is the aesthetic. One accent hue, no confetti. The animation should flatter the interface, not audition for it.