Motion

Motion has two layers: a primitive scale of durations and easings, and the semantic roles that components use. A role names its purpose, normal rather than 200ms or enter rather than a curve, and the roles are Tailwind utilities too.

Durations

Role	Value	CSS variable	Tailwind
instant	`0ms`	`--qx-motion-duration-instant`	`duration-instant`
fast	`150ms`	`--qx-motion-duration-fast`	`duration-fast`
normal	`200ms`	`--qx-motion-duration-normal`	`duration-normal`
slow	`300ms`	`--qx-motion-duration-slow`	`duration-slow`
deliberate	`400ms`	`--qx-motion-duration-deliberate`	`duration-deliberate`

Easings

Role	Value	CSS variable	Tailwind
standard	`cubic-bezier(0.4, 0, 0.2, 1)`	`--qx-motion-easing-standard`	`ease-standard`
emphasized	`cubic-bezier(0.4, 0, 0.6, 1)`	`--qx-motion-easing-emphasized`	`ease-sharpease-emphasized`
enter	`cubic-bezier(0, 0, 0.2, 1)`	`--qx-motion-easing-enter`	`ease-decelerateease-enter`
exit	`cubic-bezier(0.4, 0, 1, 1)`	`--qx-motion-easing-exit`	`ease-accelerateease-exit`
linear	`linear`	`--qx-motion-easing-linear`	—

Reduced motion

When the user asks for reduced motion, styles.css collapses every transition and animation in one place, to --qx-motion-reduced-duration. Transitions keep a duration just above zero so transitionend still fires for components that wait on it. A component only needs its own handling when it drives motion from JavaScript.

DurationsCopy Anchor Link

EasingsCopy Anchor Link

Reduced motionCopy Anchor Link

On this page

Durations

Easings

Reduced motion