Motion

Durations and easings for transitions. Pair transitionDuration and ease with a pseudo-state prop.

Durations

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

instant0ms

No transition.

fast100ms

Hover, focus, small toggles.

base150ms

Color and opacity changes. The default choice.

slow200ms

Surfaces entering or leaving.

slower300ms

Full-screen moves.

Easings are compile-time constants. Pass one to ease or transitionTimingFunction.

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

Symmetric. Tailwind ease-in-out. The default.

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

Exits: settle in, fast out.

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

Entries: fast in, settle out.

A transition property, a duration, an easing, and a hover value. Pure css, no javascript.

Hover the surface. fast plus out is the pairing for something moving toward the pointer.

Hover me

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