motion.*Motion
Motion communicates state changes. Keep it fast and purposeful — never decorative. Click any demo to replay.
Duration
motion.duration.fast120ms
Click to animate
Micro-interactions: button press, toggle, checkbox, hover state.
motion.duration.normal240ms
Click to animate
Standard transitions: card hover, dropdown, tooltip appear.
motion.duration.slow400ms
Click to animate
Large transitions: modal, panel slide, page-level animations.
Easing curves
Standard
motion.easing.standardcubic-bezier(0.4, 0, 0.2, 1)
Default for most UI transitions. Elements entering and leaving.
Use for: Hover states, toggles, general transitions
Click to replay at 400ms
Decelerate
motion.easing.deceleratecubic-bezier(0, 0, 0.2, 1)
Elements entering the screen. Starts fast, ends slow.
Use for: Modals opening, dropdowns appearing, toast entering
Click to replay at 400ms
Accelerate
motion.easing.acceleratecubic-bezier(0.4, 0, 1, 1)
Elements leaving the screen. Starts slow, ends fast.
Use for: Modals closing, dismissing notifications
Click to replay at 400ms
Sharp
motion.easing.sharpcubic-bezier(0.4, 0, 0.6, 1)
For objects that may return to screen. Crisp and decisive.
Use for: Drawer open/close, sidebar collapse
Click to replay at 400ms
Hover demo — standard easing
This card uses motion.easing.standard at motion.duration.normal (240ms) for the background color and lift transition.
✦
Hover this card
Watch the border and background color transition using standard easing at 240ms.