Animation

Motion tokens: named durations and easing curves. Use fast for hover feedback, normal for most transitions, and the emphasized easing for larger movements like dialogs.

Durations

instant0ms

fast150ms

normal250ms

slow350ms

slower500ms

Easings

DEFAULTcubic-bezier(0.4, 0, 0.2, 1)

incubic-bezier(0.4, 0, 1, 1)

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

inOutcubic-bezier(0.4, 0, 0.2, 1)

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