Motion

Fast, purposeful motion. Feedback in about 100ms, never decoration on things people use all day.

Rules

1Press feedback: 100ms ease-out. Hover color changes: 150ms. Crossfades: 200ms.
2Keep UI motion under 300ms. Enter with ease-out; never use ease-in for UI.
3Don't animate actions triggered from the keyboard or repeated many times a day.
4Animate transform and opacity, not width, height or padding.
5Popovers scale from their trigger. Modals stay centered.
6Respect prefers-reduced-motion: keep opacity and color changes, drop movement.

Interaction	Duration	Easing	Properties
Button press	100ms	ease-out	translate-y 1px
Hover color	150ms	ease-out	color, background
Label crossfade	200ms	ease-out	opacity, blur 2px
Popover, menu	100ms	zoom-in-95 + fade	from the trigger
Switch thumb	150ms	ease-out	translate-x