Peralihan-kelewatan - Trik CSS

The transition-delayharta, biasanya digunakan sebagai sebahagian daripada transitiontrengkas, digunakan untuk menentukan tempoh masa untuk melambatkan permulaan peralihan.

.delay-me ( transition-delay: 0.25s; )

Nilainya boleh menjadi salah satu daripada yang berikut:

Nilai masa yang sah ditentukan dalam beberapa saat atau milisaat misalnya 1.3satau125ms
Senarai nilai masa yang dipisahkan koma, untuk menentukan nilai kelewatan berasingan pada pelbagai peralihan untuk satu elemen, mis 1s background-color, 350ms transform

Nilai lalai untuk transition-delayadalah 0s, bermaksud bahawa tidak ada penundaan yang akan berlaku dan peralihan akan mula berlaku dengan segera. Nilai masa boleh dinyatakan sebagai nombor berdasarkan perpuluhan untuk masa yang lebih tepat.

Apabila peralihan mempunyai nilai penundaan yang negatif, itu akan menyebabkan peralihan akan segera dimulakan (tanpa penundaan), namun peralihan akan dimulai melalui proses tersebut, seolah-olah sudah dimulai.

Pena berikut menunjukkan kesan hover pada kotak yang menggunakan transition-delaynilai 2sdengan tempoh peralihan 1s:

Lihat
demo kelewatan Pen Transition oleh CSS-Tricks (@ css-tricks)
di CodePen.

Sekarang bandingkan dengan demo berikut, yang mempunyai kelewatan -1sdan jangka masa 3s:

Lihat
demo penundaan peralihan Pen Negative oleh CSS-Tricks (@ css-tricks)
di CodePen.

Perhatikan bahawa dalam contoh kedua, hanya dua pertiga terakhir dari peralihan sebenar yang dapat dilihat dan tidak ada penundaan. Nilai negatif menghilangkan kelewatan dan mengurangkan jangka masa dengan berkesan.

Untuk keserasian dalam semua penyemak imbas yang menyokong, awalan vendor diperlukan, dengan sintaks standard yang dinyatakan terakhir:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (versi stabil pertama IE yang disokong transition-delay) tidak memerlukan -ms-awalan.

Kes penggunaan biasa adalah peralihan yang mengejutkan:

Lihat
Animasi Pen Staggered oleh Chris Coyier (@chriscoyier)
di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.