Easing

You might say

This animation feels choppy. Can it speed up and slow down more naturally?

Control how motion speeds up and slows downEasing changes the pace of a transition or animation over time. Ease-out often feels responsive for an element entering, while ease-in can suit an element leaving. Choose a small motion set and judge it in the real interaction, not from curve names alone.

Know first

Transition

Easing Curve

ease-out entryease-in exitlinear machinery

Quick checkChoose the best answer

A modal should respond quickly and settle smoothly on entry, while exit should not delay the current task. How should its speed change?

Start entry fast and settle, accelerate exit, test against distance, and consolidate curves into tokensUse linear for entry, exit, and continuous animation so every frame moves the same distanceDraw a different custom curve for every modal based only on how the current screen feels

You can say this to an AI Agent

Choose task-appropriate easing for modal entry and exit: respond quickly and settle on entry, leave more decisively on exit. Test with actual travel distance, consolidate into a small motion-token set, and respect reduced motion.

When to use it

Make entering motion settle naturally
ease-out: starts fast, then slows to a stop.
Let an exiting element accelerate away
ease-in: starts slowly, then accelerates away.
Give repeated interactions a consistent rhythm
Four cubic-bezier values can shape any curve.
Tune a transition without changing its path
--easeButtonCardDialog
Reuse a small set of curves by motion type to balance consistency with context.

When NOT to use it

Choose a curve only because its name sounds right
linear keeps a constant speed and does not suit every entrance movement.
Use dramatic bounce for routine controls
Using ease-in for entrance can make the initial feedback feel sluggish.
Mix many easing curves in one flow
Make the beginning so slow that input feels delayed
Both ends overshoot and rebound out of control; use a spring when you need elasticity.

Anatomy

Horizontal axis: time →Vertical axis: progress ↑

The curve maps time to progress. Its slope is the animation’s instantaneous speed: a steeper slope moves faster, while a flatter slope moves slower.

The horizontal axis represents time from the start to the end of the animation

The vertical axis represents the fraction of the property change that has completed

Variants

ease-out

Entering and appearing, first quickly and then steadily.

ease-in

Exit and disappear, speed up and leave

ease-in-out

Switch to the original state, both ends are soft

cubic-bezier

Fine-tuning for a unique brand feel

Typical use cases

Panel opening

B I 🔗 🖱️

ease-out: The color changes first quickly and then slowly, and the fingers can feel "following the hand"

Menu closing

New version v2.4 is ready

Restart the application to complete the update.

ease-out entry: rush in quickly and "brake" to a stop before reaching the point

Card movement

✓ Saved

↑

ease-in: start slowly, then accelerate away

Page transition

Design specifications · Animation Tokens

--ease-standard cubic-bezier(.2,.8,.2,1)

Button hover Pop-up admission Card floats Use this one all

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.