Prijelaz-odgoda - CSS-trikovi

transition-delayImovine, obično se koristi kao dio transitionstenogram, koristi se za definiranje vremensko razdoblje odgoditi početak tranzicije.

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

Vrijednost može biti jedna od sljedećih:

Važeća vrijednost vremena definirana u sekundama ili milisekundama, npr. 1.3sIli125ms
Popis vremenskih vrijednosti odvojenih zarezom, za definiranje zasebnih vrijednosti kašnjenja na više prijelaza za jedan element, npr 1s background-color, 350ms transform

Zadana vrijednost za transition-delayje 0s, što znači da se neće dogoditi kašnjenje i prijelaz će se početi odvijati odmah. Vrijednost vremena može se izraziti kao decimalni broj za preciznije određivanje vremena.

Kada prijelaz ima vrijednost kašnjenja koja je negativna, to će dovesti do toga da prijelaz započne odmah (bez odgađanja), međutim prijelaz započinje dijelom procesa, kao da je već započeo.

Sljedeća olovka prikazuje efekt lebdenja na kutiji koja koristi transition-delayvrijednost 2ss trajanjem prijelaza od 1s:

Pogledajte
demonstraciju odgode prijelaza olovke od strane CSS-Tricks (@ css-tricks)
na CodePenu.

Sada to usporedite sa sljedećim demonstracijskim programom koji ima kašnjenje -1si trajanje 3s:

Pogledajte
demonstraciju odgode prijelaza negativnog prijelaza o CSS-trikovima (@ css-trikovi)
na CodePenu.

Primijetite da su u drugom primjeru vidljive samo posljednje dvije trećine stvarnog prijelaza i nema kašnjenja. Negativna vrijednost uklanja kašnjenje i učinkovito smanjuje trajanje.

Za kompatibilnost u svim podržanim preglednicima potrebni su prefiksi dobavljača, sa standardnom sintaksom koja je proglašena zadnjom:

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

IE10 (prva stabilna verzija IE-a koja podržava transition-delay) ne zahtijeva -ms-prefiks.

Uobičajeni slučaj su zamijenjeni prijelazi:

Pogledajte olovkom
raspoređene animacije Chrisa Coyiera (@chriscoyier)
na CodePenu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.