Animation Fill

Tetapkan mod pengisian animasi

Sintaks

visual="animation-fill:[value]"

Nilai

Nilai	CSS Output	Huraian
none	animation-fill-mode: none	Tiada pengisian
forwards	animation-fill-mode: forwards	Kekalkan keadaan akhir
backwards	animation-fill-mode: backwards	Terapkan keadaan mula
both	animation-fill-mode: both	Kedua-dua arah

Contoh

<div visual="animate:bounce animation-fill:forwards">Stays at end</div>

Pratonton

Pengisian Animasi

visual="animation-fill:forwards" - Kawal keadaan sebelum/selepas animasi. "forwards" kekalkan keadaan akhir, "none" kembali kepada asal.

Hover to replay animation:

none (returns)

⬆

forwards (stays)

⬆

both

⬆

Lihat Kod

<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
  <div layout="flex" space="g:medium">
    <div layout="flex:col" space="g:tiny">
      <span visual="text-size:tiny text:neutral-500">none (returns)</span>
      <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1 animation-fill:none hover:animate:bounce">⬆</div>
    </div>
    <div layout="flex:col" space="g:tiny">
      <span visual="text-size:tiny text:neutral-500">forwards (stays)</span>
      <div space="p:small" visual="bg:success text:white rounded:small animate:bounce animation-iteration:1 animation-fill:forwards hover:animate:bounce">⬆</div>
    </div>
    <div layout="flex:col" space="g:tiny">
      <span visual="text-size:tiny text:neutral-500">both</span>
      <div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">⬆</div>
    </div>
  </div>
</div>