Skip to content

Transition Delay

Tetapkan kelewatan peralihan

Sintaks

visual="delay:[value]"

Nilai

NilaiCSS OutputHuraian
instanttransition-delay: 75msKelewatan 75ms
quicktransition-delay: 100msKelewatan 100ms
fasttransition-delay: 150msKelewatan 150ms
normaltransition-delay: 200msKelewatan 200ms
slowtransition-delay: 300msKelewatan 300ms

Contoh

html
<div visual="transition:all delay:slow">Delayed transition</div>

Pratonton

Kelewatan Peralihan

visual="delay:slow" - Kelewatan sebelum peralihan bermula

Lihat Kod
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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