Geçiş gecikmesi - CSS Hileleri

transition-delayNormal olarak bir parçası olarak kullanılan özellik, transitionkısaltma, bir geçiş başlamasını geciktirmek için bir zaman uzunluğu tanımlamak için kullanılır.

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

Değer aşağıdakilerden biri olabilir:

Saniye veya milisaniye olarak tanımlanan geçerli bir zaman değeri, ör. 1.3sVeya125ms
Tek bir eleman için çoklu geçişlerde ayrı gecikme değerleri tanımlamak için virgülle ayrılmış zaman değerleri listesi, örn. 1s background-color, 350ms transform

İçin varsayılan değer transition-delayolan 0sherhangi bir gecikme gerçekleşecek ve geçiş hemen oluşmaya başlayacaktır yani. Zaman değeri, daha kesin zamanlama için ondalık tabanlı bir sayı olarak ifade edilebilir.

Bir geçişin negatif bir gecikme değerine sahip olması, geçişin hemen başlamasına neden olur (gecikme olmaksızın), ancak geçiş, sanki zaten başlamış gibi, sürecin ortasında başlayacaktır.

Aşağıdaki Kalem, geçiş süresine sahip bir transition-delaydeğeri kullanan bir kutu üzerinde bir vurgulu efekti gösterir :2s1s

CodePen'de
CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Geçişi gecikme demosuna
bakın.

Şimdi bunu, gecikme -1ssüresi ve süresi olan aşağıdaki demo ile karşılaştırın 3s:

CodePen'de
CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen Negative geçiş gecikmesi demosuna
bakın.

İkinci örnekte, gerçek geçişin yalnızca son üçte ikisinin göründüğüne ve gecikme olmadığına dikkat edin. Negatif değer gecikmeyi ortadan kaldırır ve süreyi etkili bir şekilde kısaltır.

Destekleyen tüm tarayıcılarda uyumluluk için, standart sözdiziminin en son bildirildiği satıcı önekleri gereklidir:

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

IE10 (IE'nin desteklenen ilk kararlı sürümü transition-delay) -ms-ön ek gerektirmez .

Yaygın bir kullanım örneği, aşamalı geçişlerdir:

CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem Kademeli Animasyonları
görün.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.