Motion

Use motion to make state changes easier to follow, including when content appears or disappears. Keep animations brief. When motion is reduced, the same information and actions must remain available.

Component behavior

State transition

Off

Entrance and exit

Reduced motion

Some people are sensitive to animation and prefer reduced motion. Keep state changes clear and controls usable when transitions are shortened.

Default motion

Off

Smooth transition (100ms)

Reduced motion

Off

Instant transition

OS reduced motionOff

Apply styles

Import motion.css to shorten animations and transitions when reduced motion is enabled in the operating system. This preference applies across the page and overrides the example settings.

import '@mbsw/tokens/styles.css';
import '@mbsw/tokens/motion.css';
import '@mbsw/ui/styles.css';

For JavaScript animations, check prefers-reduced-motion separately.