Prehodna zakasnitev - CSS-triki

transition-delayLastnost, ki se običajno uporabljajo kot del transitionokrajšavi, se uporablja za določanje dolžine časa odložiti začetek tranzicije.

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

Vrednost je lahko ena od naslednjih:

Veljaven časovno vrednost je opredeljena v nekaj sekundah ali milisekund npr 1.3sali125ms
Seznam časovnih vrednosti, ločenih z vejico, za določanje ločenih vrednosti zakasnitve na več prehodih za en element, npr 1s background-color, 350ms transform

Privzeta vrednost za transition-delayje 0s, kar pomeni, da ne bo prišlo do zamude in bo prehod začel takoj. Časovno vrednost lahko izrazimo kot decimalno številko za natančnejši čas.

Če ima prehod negativno vrednost zakasnitve, se bo prehod začel takoj (brez zamude), vendar se bo prehod začel na polovici postopka, kot da se je že začel.

Naslednje pero prikazuje učinek lebdenja na polju, ki uporablja transition-delayvrednost s 2ss trajanjem prehoda 1s:

Oglejte si predstavitev
zakasnitve prehoda peresa s strani CSS-Tricks (@ css-tricks)
na CodePen.

Zdaj primerjajte to z naslednjo predstavitvijo, ki ima zamudo -1sin traja 3s:

Oglejte si predstavitev
zakasnitve prehoda Pen Negative s strani CSS-Tricks (@ css-tricks)
na CodePen.

Upoštevajte, da sta v drugem primeru vidni samo zadnji dve tretjini dejanskega prehoda in ni zamude. Negativna vrednost odstrani zamudo in učinkovito zmanjša čas trajanja.

Za združljivost v vseh podpornih brskalnikih so potrebne predpone ponudnikov s standardno sintakso, razglašeno za zadnjo:

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

IE10 (prva stabilna različica IE, ki podpira transition-delay) ne zahteva -ms-predpone.

Pogost primer je zasuk prehoda:

Oglejte si
razporejene animacije pisala Chrisa Coyierja (@chriscoyier)
na CodePen.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.