Transisi-penundaan - Trik CSS

The transition-delayproperti, biasanya digunakan sebagai bagian dari transitionsingkatan, digunakan untuk menentukan lamanya waktu untuk menunda dimulainya transisi.

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

Nilainya dapat berupa salah satu dari berikut ini:

Nilai waktu yang valid yang ditentukan dalam detik atau milidetik misalnya 1.3satau125ms
Daftar nilai waktu yang dipisahkan koma, untuk menentukan nilai penundaan terpisah pada beberapa transisi untuk satu elemen misalnya 1s background-color, 350ms transform

Nilai defaultnya transition-delayadalah 0s, artinya tidak ada penundaan yang akan terjadi dan transisi akan segera mulai terjadi. Nilai waktu dapat dinyatakan sebagai angka berbasis desimal untuk pengaturan waktu yang lebih tepat.

Ketika sebuah transisi memiliki nilai penundaan yang negatif, itu akan menyebabkan transisi untuk segera dimulai (tanpa penundaan), namun, transisi akan dimulai di tengah proses, seolah-olah telah dimulai.

Pena berikut memperlihatkan efek hover pada kotak yang menggunakan transition-delaynilai 2sdengan durasi transisi 1s:

Lihat
demo penundaan Pen Transition oleh CSS-Tricks (@ css-trick)
di CodePen.

Sekarang bandingkan dengan demo berikut, yang memiliki penundaan -1sdan durasi 3s:

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

Perhatikan bahwa dalam contoh kedua, hanya dua pertiga terakhir dari transisi aktual yang terlihat dan tidak ada penundaan. Nilai negatif menghilangkan penundaan dan secara efektif memotong durasi.

Untuk kompatibilitas di semua browser pendukung, prefiks vendor diperlukan, dengan sintaks standar yang dideklarasikan terakhir:

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

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

Kasus penggunaan yang umum adalah transisi yang lambat:

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

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.