Átmenet-késleltetés - CSS-trükkök

Az a transition-delaytulajdonság, amelyet általában a transitiongyorsírás részeként használnak, meghatározza az átmenet megkezdésének késleltetési idejét.

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

Az érték a következő lehet:

Egy érvényes időérték meghatározott másodperc ezredmásodperc pl 1.3svagy125ms
Vesszővel elválasztott időértékek listája, külön késleltetési értékek meghatározásához egyetlen elem többszörös átmeneténél, pl 1s background-color, 350ms transform

A (z) alapértelmezett értéke transition-delayazt 0sjelenti, hogy nem történik késés, és az átmenet azonnal elkezdődik. Az időérték a pontosabb időzítés érdekében tizedes alapú számként kifejezhető.

Ha egy átmenet késleltetési értéke negatív, akkor az átmenet azonnal megkezdődik (késés nélkül), azonban az átmenet a folyamat felénél kezdődik, mintha már megkezdődött volna.

A következő toll egy lebegő hatást mutat egy olyan dobozon, amelynek transition-delayértéke 2sátmeneti időtartamú 1s:

Lásd a
CSS-Tricks (@ css-tricks) által a Pen Transition delay késleltető bemutatót
a CodePen-en.

Most hasonlítsa össze a következő bemutatóval, amelynek késleltetése -1sés időtartama 3s:

Tekintse meg a
CSS-Tricks (@ css-tricks)
által írt Pen Negative átmeneti késleltetési bemutatót a CodePen-en.

Vegye figyelembe, hogy a második példában csak a tényleges átmenet utolsó kétharmada látható, és nincs késés. A negatív érték eltávolítja a késést és hatékonyan csökkenti az időtartamot.

Az összes támogató böngésző kompatibilitásához szállító előtagokra van szükség, a szabványos szintaxissal utoljára deklarálva:

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

Az IE10 (az IE első támogatott stabil verziója transition-delay) nem igényli az -ms-előtagot.

Gyakori eset a lépcsőzetes átmenetek:

Lásd
Chris Coyier (@chriscoyier) Pen Staggered Animations-ját
a CodePen-en.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.