Tokens & namespaces
easing
Preset easing values and their consumers.
Scope
These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.
Timing curves describe how an animation or transition progresses between its states.
Values
smooth
--easing-smooth- Default
cubic-bezier(.4, 0, .2, 1) soft
--easing-soft- Default
cubic-bezier(.33, 1, .68, 1) crisp
--easing-crisp- Default
cubic-bezier(.16, 1, .3, 1) snap
--easing-snap- Default
cubic-bezier(.2, 0, 0, 1) accelerate
--easing-accelerate- Default
cubic-bezier(.4, 0, 1, 1) decelerate
--easing-decelerate- Default
cubic-bezier(0, 0, .2, 1) overshoot
--easing-overshoot- Default
cubic-bezier(.34, 1.56, .64, 1) rewind
--easing-rewind- Default
cubic-bezier(.36, 0, .66, -.56) spring
--easing-spring- Default
cubic-bezier(.68, -.6, .32, 1.6)
Consumers
animation-, animation-timing-function-, transition-, transition-timing-function-
Customize
See variables and modes and theme directives. For usage and examples, see Motion.