Collapse out.
A surface compresses toward its upper edge.
See the movement
One intentional triggerPlayback starts only when you request it. Stop returns to the still illustration.
What it does
A vertical collapse visually ties dismissal to the top of a panel. This preview scales the surface without reflow; a production accordion also needs a separate height or grid-track transition for its surrounding layout.
Timing curve
cubic-bezier(.4,0,1,1)Default duration400ms
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