transition-durationVlastnost, běžně používají jako součást transitionzkratku, se používá k definování trvání určeného přechodu. To znamená dobu, po kterou bude trvat přechod cíleného prvku mezi dvěma definovanými stavy.
.example ( transition-duration: 3s; )Hodnota může být jedna z následujících:
- Platná hodnota času (definovaná v sekundách nebo milisekundách)
- Seznam časových hodnot oddělených čárkami pro přechod více vlastností na jeden prvek
Výchozí hodnota pro transition-durationje 0s, což znamená, že nedojde k žádnému přechodu a změna vlastnosti proběhne okamžitě, i když jsou definovány další vlastnosti související s přechodem. Časovou hodnotu lze vyjádřit jako desetinné číslo pro přesnější načasování a záporné hodnoty nejsou povoleny.
Následující CodePen ukazuje efekt přechodu na pole, které používá transition-durationhodnotu 1spostupně měnit barvu pozadí:
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-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (první stabilní verze IE, která podporuje transition-duration) nevyžaduje -ms-předponu.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Funguje | Funguje | 4+ | 10,5+ | 10+ | 2.1+ | 3,2+ |