Motion
Durations, easings, and keyframes in the Saas UI preset
Prefer the motion bands over ad-hoc milliseconds. Each band is a CSS variable
on .sui-theme, with a .min / .max range from --motion-ratio
(default 0.75).
| Token | CSS variable | Default |
|---|---|---|
durations.motion.fast | --motion-fast | 150ms |
durations.motion.medium | --motion-medium | 200ms |
durations.motion.slow | --motion-slow | 400ms |
durations.fast, moderate, and slower alias the same axes.
easings.standard is --ease-standard.
Durations
motion bands
motion.fast.min
motion.fast
motion.fast.max
motion.medium.min
motion.medium
motion.medium.max
motion.slow.min
motion.slow
motion.slow.max
named durations
fastest
faster
fast
moderate
slow
slower
slowest
Easings
theme.tokens.easings
standard
ease-in
ease-out
ease-in-out
ease-in-smooth
bounce-in
bounce-out
Keyframes
theme.keyframes
spin
pulse
ping
bounce
fade-in
fade-out
slide-from-left-full
slide-from-right-full
slide-from-top-full
slide-from-bottom-full
slide-to-left-full
slide-to-right-full
slide-to-top-full
slide-to-bottom-full
slide-from-top
slide-from-bottom
slide-from-left
slide-from-right
slide-to-top
slide-to-bottom
slide-to-left
slide-to-right
scale-in
scale-out
marqueeX
marqueeY