Forma 36 Logo

Transitions

Transition Durations

TokenCSS VariableValueExample
transition-duration-short
--transition-duration-short
0.1s
transition-duration-default
--transition-duration-default
0.2s
transition-duration-long
--transition-duration-long
0.3s

Transition Easings

TokenCSS VariableValueExample
transition-easing-default
--transition-easing-default
ease-in-out
transition-easing-cubic-bezier
--transition-easing-cubic-bezier
cubic-bezier(0.13, 0.62, 0.11, 0.99)