Scale in.
An element gently grows into its final size.
See the movement
One intentional triggerPlayback starts only when you request it. Stop returns to the still illustration.
What it does
Scaling from slightly smaller than the final state can emphasize a new control or floating surface. Preserve the element’s center and avoid scaling from zero for ordinary interface content.
Timing curve
cubic-bezier(.2,.7,.2,1)Default duration350ms
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