Crossfade.
One visual state dissolves into another.
See the movement
One intentional triggerPlayback starts only when you request it. Stop returns to the still illustration.
What it does
Two states overlap in the same space while one fades out and the other fades in. The library preview uses two decorative cards; in a real component, only the active state should remain interactive.
Timing curve
ease-in-outDefault duration850ms
RepetitionOnce per trigger
Make the motion useful
Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.
CSS animation reference