Use movement to explain a change
An entrance animation can help identify new content, and a loading indicator can communicate that an operation is still running. Neither should prevent people from reading or using a page. Choose an animation because it clarifies the state of the interface, rather than because the effect is available.
Open an example to see its code and adapt the timing to your component. A short movement may suit a small panel, while a large visual transition needs more careful testing. Prefer restrained distances and avoid repeated motion beside long-form text.
Respect the visitor’s reduced-motion preference and leave essential content visible when an animation is removed. An animated preview does not validate the performance or accessibility of the final implementation.
Design a custom CSS animation →