Motion has two speeds. Controls respond fast. Light moves slowly: changes of flavor, accent or glow take the time of a cloud passing a window. Try both in the playground.
Durations
| Token | Value |
|---|---|
--san-duration-instant | 80ms |
--san-duration-fast | 140ms |
--san-duration-base | 220ms |
--san-duration-slow | 360ms |
--san-duration-slower | 560ms |
--san-duration-processionLight moving across stone: flavor and glow changes. | 900ms |
Use fast and base for controls, and procession for light.
Easing
| Token | Value |
|---|---|
--san-ease-standard | cubic-bezier(0.2, 0, 0, 1) |
--san-ease-enter | cubic-bezier(0.05, 0.7, 0.1, 1) |
--san-ease-exit | cubic-bezier(0.3, 0, 0.8, 0.15) |
--san-ease-linear | cubic-bezier(0, 0, 1, 1) |
.panel {
transition: background-color var(--san-duration-base) var(--san-ease-standard);
}
Reduced motion
When the visitor asks for reduced motion (prefers-reduced-motion: reduce), the stylesheet sets every --san-duration-* token to 0ms, so anything timed with the tokens changes instantly.
- A zero-length transition does not start, so it fires no
transitionendevent. Code that waits for one should check the duration first. - Animations and durations written without the tokens are not covered: time them with the tokens, or stop them yourself under the same media query.