Motion · Use the system · Guide

Choose easing by transition direction

An easing curve is a map from elapsed time to completed progress. The diagonal is a constant rate; the distance between the curve and the diagonal is the character you feel. Material gives you seven, and the choice is almost always decided by one question: is the element entering, exiting, or staying on screen?

Entering decelerates Start fast, end slow. The element arrives before you can study it and settles where your attention should land.

Exiting accelerates Start slow, end fast. Nothing needs to be read on the way out, so the tail is cheap to spend.

Staying is symmetric Both ends are visible, so both ends are eased. This is the curve that reads as "one object moved", not "one object replaced another".

Emphasized

The default voice for anything a person is meant to notice: a sheet opening, a card expanding, a shape morphing.

emphasized Begins and ends on screen The element is visible before and after the change.

linear(0, 0.0014 1.3%, 0.006 2.7%, 0.0147 4.2%, 0.0281 5.8%, 0.0472 7.4%, 0.0725 9%, 0.1049 10.5%, 0.1452 12%, 0.1941 13.4%, 0.2523 14.6%, 0.3207 15.7%, 0.4 16.7%, 0.5 17.7%, 0.5903 19.1%, 0.6709 20.9%, 0.7422 23.5%, 0.8043 27%, 0.8575 31.8%, 0.9019 38%, 0.9378 46%, 0.9653 55.9%, 0.9847 68.1%, 0.9962 82.7%, 1)

emphasized-decelerate Enters the screen Arrives fast, then settles — attention lands where it stops.

cubic-bezier(0.05, 0.7, 0.1, 1)

emphasized-accelerate Exits the screen Leaves promptly. Nothing to look at once it is gone.

cubic-bezier(0.3, 0, 0.8, 0.15)

Standard

Utility movement that should not compete for attention: small state changes, hovers, list reorders.

standard Begins and ends on screen The everyday transition inside a component.

cubic-bezier(0.2, 0, 0, 1)

standard-decelerate Enters the screen A quiet entrance, such as a tooltip or menu.

cubic-bezier(0, 0, 0, 1)

standard-accelerate Exits the screen A quiet exit that should not linger.

cubic-bezier(0.3, 0, 1, 1)

Linear

No character at all. Reserve it for continuous, unstyled progress.

linear Constant rate Indeterminate progress, video scrubbing, audio meters.

cubic-bezier(0, 0, 1, 1)

Emphasized is not a bezier

Material's emphasized curve is specified as two joined segments, which no single cubic-bezier() can express. Etesie emits it as a CSS linear() approximation with enough stops that the join is invisible — the token is still --md-sys-motion-easing-emphasized, and the Token reference marks its provenance as derived rather than generated.