TRANSITION EFFECT

Stagger reveal.

A short sequence introduces related items in order.

See the movement

One intentional trigger

Duration 0.45s

Playback starts only when you request it. Stop returns to the still illustration.

What it does

Items share the same entrance but begin a little apart. Small delays can reveal a list’s structure; long delays make people wait for controls that should already be available.

Timing curveease-out

Default duration450ms

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

TAKE THE MOVEMENT WITH YOU

Describe the effect.

Copy this into your next coding conversation, or pair it with a dictionary component.

Stagger reveal: A short sequence introduces related items in order.
Reveal sibling items with the same small upward fade, offsetting each start by 70ms. Keep the total sequence short, cap cumulative delays for long lists, and make every item immediately available with reduced motion.
Timing: 450ms; easing: ease-out; play once per intentional trigger.
Accessibility: respect prefers-reduced-motion with a static state or brief opacity-only change, and never rely on motion alone to convey meaning.

Find a component

For reduced motion, use a static state or a brief opacity change. Animation should never be required to understand the component.

See the movement

What it does

Make the motion useful

In the same family

Crossfade

Shape morph