Motion Properties
Global motion properties that animation and transition css properties.
| CSS Vars | Editable In | Value | Comments | |
|---|---|---|---|---|
var(--transition) | settings/motion.scss | var(--motion-duration) var(--motion-ease); | Default transition property: covers duration and timing. | |
| | ||||
var(--motion-duration) | 0.333s | Default duration, 1/3 of a second. | ||
var(--motion-duration-150) | 0.150s | Shorter duration, .150 of a second. | ||
var(--motion-duration-600) | 0.666s | Longer duration, 2/3 of a second. | ||
| | ||||
var(--motion-ease) | cubic-bezier(.22,.68,0,1) | Timing function: default timing for transitions. | ||
var(--motion-scalein) | cubic-bezier(.22,.68,0,1) | Timing function: starts fast and decelerates as it progresses. | ||
var(--motion-scaleout) | cubic-bezier(.165, .84, .44, 1) | Timing function: starts slow and accelerates as it progresses. | ||
var(--motion-spring) | cubic-bezier(.68, -.55, .265, 1.55) | Timing function: springy feel. Good for drawing focus. | ||