Motion
Duration + easing tokens used by components and interactions.
Motion tokens
If a token is not defined in your current CSS build, it will show “—”.
| Preview | Token | Used for | Value |
|---|---|---|---|
| fast | --sp-dur-1 |
Fast transitions (if defined) | — |
| base | --sp-dur-2 |
Default transitions (if defined) | — |
| slow | --sp-dur-3 |
Slow transitions (if defined) | — |
| ease | --sp-ease-1 |
Default easing (if defined) | — |
| ease | --sp-ease-2 |
Emphasized easing (if defined) | — |