Orbit

Motion

Source

Duration and easing tokens for transitions. Pair transitionDuration and ease with pseudo-state props to animate state changes.

Durations

Durations are CSS variables, so motion can be tuned globally or zeroed for prefers-reduced-motion. Pass to transitionDuration.

instant

0ms

No animation; immediate state change.

fast

120ms

Hover, focus, and small toggles.

base

200ms

Default for most transitions.

slow

320ms

Larger surfaces entering or leaving.

slower

480ms

Full-screen or emphasis moments.

Easings

Easings are compile-time constants; they never vary at runtime. Pass to ease or transitionTimingFunction.

standard

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

General-purpose, symmetric. Default choice.

decelerate

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

Enter transitions: fast in, settle out.

accelerate

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

Exit transitions: settle in, fast out.

spring

cubic-bezier(0.5, 1.25, 0.4, 1)

Slight overshoot for playful emphasis.

Usage

Combine a transition property, a duration, and an easing with a hover value. The transition runs from pure CSS, no JavaScript required.

Hover the surface below to see fast plus decelerate, the recommended pairing for elements entering toward the pointer.

Hover me

<Box
  transform={{ hover: 'translateY(-4px)' }}
  transitionProperty="transform"
  transitionDuration="fast"
  ease="decelerate"
>
  Hover me
</Box>