Transition Timing

Tetapkan fungsi masa peralihan

Sintaks

visual="ease:[value]"

Nilai

Nilai	CSS Output	Huraian
linear	transition-timing-function: linear	Masa linear
in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1)	Memasuki mudah
out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1)	Keluar mudah
in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)	Masuk-keluar mudah

Contoh

<div visual="transition:all ease:out">Ease out effect</div>

Pratonton

Fungsi Masa

visual="ease:out" - Kawal lengkung pecutan

Lihat Kod

<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 ease:in hover:scale:110">ease:in</button>
  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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