Motion
4 curves and 6 durations, the same in every app. Reduced motion is handled in base.css.
Curves
out is the one for nearly everything. spring came from Brookwood, for things that should land with a bit of overshoot.
--ds-ease-out--ds-ease-in--ds-ease-in-out--ds-ease-spring| Token | Value |
|---|---|
--ds-ease-out | cubic-bezier(0.22, 1, 0.36, 1) |
--ds-ease-in | cubic-bezier(0.55, 0, 1, 0.45) |
--ds-ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
--ds-ease-spring | linear(0, 0.006, 0.025, 0.101, 0.539, 0.816, 0.934, 0.988, 1.007, 1.011, 1.005, 1) |
Durations
--ds-duration-instant 100ms--ds-duration-fast 150ms--ds-duration-base 250ms--ds-duration-slow 400ms--ds-duration-slower 700ms--ds-duration-slowest 900ms