Articles

Motion & Animation

Transitions, easing, scroll-driven effects, View Transitions and motion that respects reduced-motion users.

Animate CSS Gradients Smoothly With @property

Animate gradient angles and stops with typed CSS custom properties, then add reliable fallbacks, reduced-motion support, and practical paint-performance checks.

Inside this article

Start with a gradient worth keeping still
Register an interpolable value
Animate the angle with a static fallback
Control stops, pacing, and visual emphasis

Aiko TanakaRead the article

Motion & Animation

Staggered Animation in CSS Without Delaying Interaction

Build staggered list entrances with CSS custom properties, bounded delays, stable item identity, and reduced-motion rules that keep real product interfaces responsive.

Aiko Tanaka

Motion & Animation

View Transitions: Add Them Without Breaking Navigation

Add same-document View Transitions with safe fallbacks, unique snapshot names, reduced-motion handling, and navigation behavior that remains correct when animations fail.

Aiko Tanaka

Motion & Animation

CSS Scroll-Driven Animations With Scroll Timelines

Create progressive CSS scroll-driven effects with scroll() and view(), preserve readable fallbacks, and test timeline ranges without hijacking normal scrolling.

Aiko Tanaka

Motion & Animation

CSS Easing Functions: cubic-bezier() and steps()

Tune CSS easing curves for entrances, exits, and stepped motion. Learn cubic-bezier constraints, practical timing tests, and how to avoid overshoot that harms usability.

Inside this article

Build a neutral easing test
Understand what a cubic curve controls
Match easing to the movement's job
Use steps for intentionally discrete motion

Aiko TanakaRead the article

Motion & Animation

CSS Hover Effects for Cards and Buttons: Tasteful Defaults

Build restrained hover effects that clarify clickable cards and buttons, with practical CSS timings, keyboard states, touch fallbacks, and reduced-motion rules.

Aiko Tanaka

Motion & Animation

Animate Height Auto in CSS With interpolate-size

Choose a reliable approach to expanding panels: native intrinsic-size interpolation, grid tracks, or measured heights, with accessible controls and reduced-motion fallbacks.

Aiko Tanaka

Motion & Animation

CSS Transition vs Animation: When to Use Keyframes

Choose CSS transitions or keyframes for each motion task, handle interrupted states, and build effects that stay predictable across input methods and reduced-motion settings.

Aiko Tanaka

Browse another topic