Durations and easings
Each replayed on demand.
Durations
Fast
--duration-fast 160ms
Hover, focus, a color change.
Base
--duration-base 240ms
A switch, a tab, a row opening.
Slow
--duration-slow 400ms
A dialog, a drawer, a toast.
Slower
--duration-slower 640ms
The certificate’s seal drawing once.
Easings
Standard
--ease-standard cubic-bezier(0.2, 0, 0, 1)
Moves within the screen: a tab’s line, a panel opening.
Enter
--ease-enter cubic-bezier(0.16, 1, 0.3, 1)
Arrives and settles slowly: a dialog, a toast.
Exit
--ease-exit cubic-bezier(0.4, 0, 1, 1)
Leaves, gathering speed: a dialog closing.
- Calm: nothing bounces, overshoots or moves for attention.
- Motion follows what the reader did: a dialog rises where it was asked for, a toast arrives from its edge.
- Leaving is quicker than arriving.
- Only waiting loops: the spinner and the loaders.