Prechodové oneskorenie - Triky CSS

transition-delayVlastnosť, bežne používajú ako súčasť transitionskratku, sa používa na definovanie času oneskorenia začiatku prechodu.

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

Hodnota môže byť jedna z nasledujúcich:

Platná hodnota času definovaná v sekundách alebo milisekundách, napr. 1.3sAlebo125ms
Zoznam časových hodnôt oddelených čiarkami na definovanie samostatných hodnôt oneskorenia pri viacerých prechodoch pre jeden prvok, napr 1s background-color, 350ms transform

Predvolená hodnota pre transition-delayje 0s, to znamená, že nedôjde k žiadnemu oneskoreniu a prechod začne prebiehať okamžite. Časovú hodnotu je možné pre presnejšie načasovanie vyjadriť ako desatinné číslo.

Keď má prechod negatívnu hodnotu oneskorenia, spôsobí to, že sa prechod začne okamžite (bez oneskorenia), prechod sa však začne čiastočne v priebehu procesu, akoby sa už začal.

Nasledujúce pero zobrazuje efekt umiestnenia kurzora myši na pole, ktoré používa transition-delayhodnotu 2ss trvaním prechodu 1s:

Prezrite si
ukážku oneskorenia prechodu pera od CSS-Tricks (@ css-tricks)
na CodePen.

Teraz to porovnajte s nasledujúcou ukážkou, ktorá má oneskorenie -1sa trvanie 3s:

Pozrite si
ukážku negatívneho oneskorenia prechodu pera od CSS-Tricks (@ css-tricks)
na stránkach CodePen.

Všimnite si, že v druhom príklade sú viditeľné iba posledné dve tretiny skutočného prechodu a nedochádza k žiadnemu oneskoreniu. Záporná hodnota odstráni oneskorenie a efektívne sa skráti na trvanie.

Kvôli kompatibilite vo všetkých podporovaných prehľadávačoch sú vyžadované predpony dodávateľov so štandardnou syntaxou deklarovanou ako posledná:

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

IE10 (prvá stabilná verzia IE, ktorá podporuje transition-delay) nevyžaduje -ms-predponu.

Bežným prípadom použitia sú postupné prechody:

Prezrite si
animácie Pen Staggered od Chrisa Coyiera (@chriscoyier)
na stránkach CodePen.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.