Foundations6 tokens
Motion
Three durations and three easing curves.
- Source
tokens/motion.json- Figma
- Collection Number
- In code
var(--duration-base)
Duration
Hover a card to play it. Shown with easing/standard.
duration/fast120msHover, press, colour changesduration/base200msMost transitions; the light fadeduration/slow320msMenus, panels, larger movesEasing
Hover a card to play it. Shown at duration/slow so the curve is easy to see.
easing/standardcubic-bezier(0.2, 0, 0, 1)Things that move on screeneasing/entercubic-bezier(0, 0, 0, 1)Things that appeareasing/exitcubic-bezier(0.3, 0, 1, 1)Things that leave