Motion · Foundations

Easing

The curve decides how an animation feels more than its duration. Strong ease-out curves start fast, so the interface feels instant.

Curves#

--ease-outcubic-bezier(0.23, 1, 0.32, 1)

Enter, exit, press feedback. The default.

--ease-in-outcubic-bezier(0.77, 0, 0.175, 1)

Elements moving from one place to another on screen.

--ease-drawercubic-bezier(0.32, 0.72, 0, 1)

Sheets and drawers. Fast start, long soft landing.

easecubic-bezier(0.25, 0.1, 0.25, 1)

Color and opacity on hover.

linearcubic-bezier(0, 0, 1, 1)

Constant motion only: spinners, progress, hold-to-confirm.

Same distance, same 600ms. Watch how much sooner the foundation curves seem to arrive.

ease (CSS default)

--ease-out

--ease-in-out

--ease-drawer

Entering or leaving the screen? --ease-out.
Moving or morphing while visible? --ease-in-out.
Changing color on hover? ease.
Spinning or filling at a steady rate? linear.
Never ease-in. A 300ms dropdown with ease-in feels slower than the same dropdown with ease-out.