Animation Duration

Tetapkan tempoh animasi

Sintaks

visual="animation-duration:[value]"

Nilai

Nilai	CSS Output	Huraian
instant	animation-duration: 75ms	75ms
quick	animation-duration: 100ms	100ms
fast	animation-duration: 150ms	150ms
normal	animation-duration: 200ms	200ms
slow	animation-duration: 300ms	300ms
slower	animation-duration: 500ms	500ms
lazy	animation-duration: 700ms	700ms

Contoh

<div visual="animate:spin animation-duration:slow">Slow spin</div>

Pratonton

Tempoh Animasi

visual="animation-duration:slow" - Kawal kelajuan animasi

fast

slow

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:fast">fast</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:slow">slow</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div visual="animation:[custom-value]">Custom</div>