Motion
Durations and easings for transitions, and how reduced motion is handled.
Motion in the platform is functional: it shows where an overlay came from and confirms that something changed. It is never decorative.
| Token | Value |
|---|---|
--duration-enter | 200ms |
--duration-exit | 120ms |
--duration-fast | 150ms |
--duration-base | 250ms |
--duration-slow | 400ms |
--ease-enter | cubic-bezier(0.16, 1, 0.3, 1) |
--ease-exit | cubic-bezier(0.4, 0, 1, 1) |
Overlays
Every overlay (dialog, sheet, popover, menu, tooltip) shares one asymmetric timing: it enters
in --duration-enter (200ms) with ease-enter (a long ease-out) and exits in
--duration-exit (120ms) with ease-exit (a short ease-in). Dismissal feels immediate; arrival
is legible. The components wire this up through Base UI’s data-starting-style and
data-ending-style attributes.
className =
"transition-opacity duration-(--duration-enter) ease-enter data-starting-style:opacity-0 data-ending-style:duration-(--duration-exit) data-ending-style:ease-exit"Everything else
Hover, toggles and small reveals use --duration-fast (150ms). Larger layout changes such as
a collapsing sidebar use --duration-base (250ms). Reserve --duration-slow (400ms) for
content that moves a long distance.
Reduced motion
When the user asks the system for reduced motion, styles.css collapses every animation and
transition to near zero. Elements still land on their final state, so nothing is left
half-transformed. You do not need to handle prefers-reduced-motion in components.