Přechodové zpoždění - Triky CSS

transition-delayVlastnost, běžně používají jako součást transitionzkratku, se používá k definování doby zpoždění začátku přechodu.

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

Hodnota může být jedna z následujících:

Platná časová hodnota definovaná v sekundách nebo milisekundách, např. 1.3sNebo125ms
Seznam časových hodnot oddělených čárkami pro definování samostatných hodnot zpoždění při více přechodech pro jeden prvek, např 1s background-color, 350ms transform

Výchozí hodnota pro transition-delayje 0s, což znamená, že nedojde k žádnému zpoždění a přechod začne nastat okamžitě. Časovou hodnotu lze pro přesnější načasování vyjádřit jako desetinné číslo.

Když má přechod hodnotu zpoždění, která je záporná, způsobí to, že přechod začne okamžitě (bez zpoždění), ale přechod začne částečně v průběhu procesu, jako by již začal.

Následující pero ukazuje efekt přechodu na pole, které používá transition-delayhodnotu 2ss dobou přechodu 1s:

Podívejte se na
ukázku zpoždění přechodu pera od CSS-Tricks (@ css-tricks)
na CodePen.

Nyní to porovnejte s následující ukázkou, která má zpoždění -1sa dobu trvání 3s:

Podívejte se na
ukázku negativního zpoždění přechodu pera od CSS-Tricks (@ css-tricks)
na CodePen.

Všimněte si, že v druhém příkladu jsou viditelné pouze poslední dvě třetiny skutečného přechodu a nedochází ke zpoždění. Záporná hodnota odstraní zpoždění a efektivně se zkrátí na dobu trvání.

Pro kompatibilitu ve všech podporujících prohlížečích jsou vyžadovány předpony dodavatelů se standardní syntaxí deklarovanou jako poslední:

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

IE10 (první stabilní verze IE, která podporuje transition-delay) nevyžaduje -ms-předponu.

Běžným případem použití jsou střídavé přechody:

Podívejte se na
animace Pen Staggered od Chrisa Coyiera (@chriscoyier)
na CodePen.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.