Forma 36 Logo

Transitions

Transition Durations

TokenCSS VariableValueExample
transition-duration-short--transition-duration-short0.1s
transition-duration-default--transition-duration-default0.2s
transition-duration-long--transition-duration-long0.3s

Transition Easings

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