Bevegelse

Varighet og easing hører til merkevaren, slik at en merkevare kan gjøre grensesnittet raskere, roligere eller mer sprettent uten å endre komponentene.

Varighet

Token	Tailwind-klasse	Bekk	Bruksområde
`motion.duration.fast`	`duration-fast`	150 ms	Fargeoverganger (standard for `transition-*`)
`motion.duration.default`	`duration-default`	200 ms	Små elementer som åpnes og lukkes
`motion.duration.slow`	`duration-slow`	300 ms	Større flater, som sheets
`motion.duration.slower`	`duration-slower`	500 ms	Store flater som åpnes

Easing

Token	Tailwind-klasse	Bruksområde
`motion.easing.standard`	`ease-standard`	Bevegelse innenfor skjermen
`motion.easing.enter`	`ease-enter`	Elementer som kommer inn
`motion.easing.exit`	`ease-exit`	Elementer som forsvinner

Tailwinds transition, transition-colors og lignende bruker motion.duration.fast og motion.easing.standard som standard.

Bruk i CSS

.panel {
  transition: transform var(--motion-duration-slow) var(--motion-easing-enter);
}