Animations
Easing Functions
The variables for easing functions are all prefixed with --ease-. They’re
designed to be used with the animation-timing-function property.
ease-default
A general-purpose easing function that works well for most use cases.
ease-out
An easing function that starts fast and slows down at the end.
ease-in
An easing function that starts slow and speeds up at the end.
ease-both
An easing function that starts slow, speeds up in the middle, and slows back down at the end.
ease-both-subtle
An easing function that is nearly linear but speeds up slightly in the middle.
ease-spring
An easing function that moves slightly backwards at the beginning, moves quickly in the middle, and slightly overshoots the target state before settling at the end.
Durations
The variables for durations are all prefixed with --duration-. They’re
designed to be used with the animation-duration and transition-duration
properties.
duration-s
Use this duration for small interactions that don’t necessarily need to be animated, but look better with a subtle animation.
duration-m
Use this duration when you want an animation to be noticeable without distracting the user or slowing them down.
duration-l
Use this duration for animations that the user should pay attention to, or ones that have a substantial impact to the page.
duration-xl
Use this duration for longer animations. It should be used sparingly, since users generally don’t want to wait this long for animations to complete.