Slide up.
Content rises a short distance as it appears.
See the movement
One intentional triggerPlayback starts only when you request it. Stop returns to the still illustration.
What it does
A small upward movement gives newly revealed content a sense of arrival. Combine translation with opacity, keeping the travel short enough that the destination remains easy to follow.
Timing curve
cubic-bezier(.2,.7,.2,1)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