CSS animation guides
These guides explain the decisions that sit around an animation effect: how to adapt it to a component, how timing changes its character, and how to keep motion usable for people who prefer less of it. Use the CSS effect index or SASS effect index when you need a live example and source code.
Customize an effect
Learn which parts of an example to copy, how to change distance, size, color, and speed, and how to avoid conflicts with animation names already used by an application.
Choose animation timing
Compare durations, delays, easing functions, steps, iteration counts, and directions. The guide also explains why transform and opacity are usually better animation targets than layout properties.
Provide accessible motion
Add reduced-motion behavior, usable pause controls, and a testing process for flashing, focus, and content that would otherwise depend on animation.