Om kategorien
Formål
Korte overgangsvarigheter for hover, fokus og enkle fades, med innebygd støtte for prefers-reduced-motion. Verdien blir automatisk 0ms når brukeren ber om mindre bevegelse.
Egner seg for
- Standardvarighet for små overgangseffekter som hover, fokus og enkel fade.
- Komponenter som bare trenger en trygg standardverdi og ikke egen reduced-motion-logikk for varigheten alene.
Egner seg ikke for
- Ikke for lange, uttrykksfulle animasjoner eller sekvenser med bevisst annet tempo.
- Ikke for reduced-motion-tilfeller der mer enn bare varigheten må endres.
Tokens
| Token | Verdi | Beskrivelse |
|---|---|---|
--transition-duration | 150ms | Standard varighet for hover-, fokus- og andre små overgangseffekter. Konsumenter slipper egen prefers-reduced-motion-sjekk for denne ene varigheten. |
--transition-easing | cubic-bezier(0.32, 0.72, 0, 1) | Delt easing-kurve for alle korte overganger - en myk, Apple-aktig «spring»-tilnærming (samme kurveform som iOS sine ark-/modal-presentasjoner) i stedet for nettleserens lineære standard-ease. Trenger ingen egen reduced-motion-verdi siden --transition-duration allerede nulles ut. |
Detaljer
- Tokenet blir automatisk
0msvedprefers-reduced-motion: reduce, så komponenter som bare trenger standardvarigheten slipper egen media query. - Se guiden om animasjon og bevegelse for hvilke CSS-egenskaper som er trygge å animere sammen med denne tokenen.