Animation Builtin

Terapkan animasi terbina dalam

Sintaks

visual="animate:[value]"

Nilai

Nilai	CSS Output	Huraian
none	animation: none	Tiada animasi
spin	animation: spin 1s linear infinite	Berpusing
ping	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite	Kesan ping
pulse	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite	Berdenyut
bounce	animation: bounce 1s infinite	Melantun

Contoh

<div visual="animate:spin">Loading...</div>

Pratonton

Animasi Terbina Dalam

visual="animate:spin" - Animasi sedia guna

spin

pulse

bounce

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">spin</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse">pulse</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce">bounce</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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