Övergångsfördröjning - CSS-tricks

Den transition-delayegenskapen, som normalt används som en del av transitionen förkortning, används för att definiera en lång tid för att fördröja starten av en övergång.

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

Värdet kan vara något av följande:

Ett giltigt tidsvärde definierat i sekunder eller millisekunder, t.ex. 1.3seller125ms
En kommaseparerad lista över tidsvärden för att definiera separata fördröjningsvärden vid flera övergångar för ett enda element, t.ex. 1s background-color, 350ms transform

Standardvärdet för transition-delayär 0s, vilket innebär att ingen fördröjning kommer att äga rum och övergången börjar ske omedelbart. Tidsvärdet kan uttryckas som ett decimalbaserat tal för mer exakt timing.

När en övergång har ett fördröjningsvärde som är negativt kommer det att leda till att övergången börjar omedelbart (utan fördröjning), men övergången börjar dock halvvägs genom processen, som om den redan hade börjat.

Följande penna visar en svävareffekt på en ruta som använder ett transition-delayvärde 2smed en övergångstid på 1s:

Se Pen
Transition delay demo av CSS-Tricks (@ css-tricks)
på CodePen.

Jämför det nu med följande demo, som har en fördröjning på -1soch en varaktighet på 3s:

Se Pen
Negativ övergångsfördröjningsdemo av CSS-Tricks (@ css-tricks)
på CodePen.

Observera att i det andra exemplet är det bara de sista två tredjedelarna av den faktiska övergången som är synliga och det finns ingen fördröjning. Det negativa värdet tar bort fördröjningen och minskar effektivt varaktigheten.

För kompatibilitet i alla stödjande webbläsare krävs leverantörsprefix, med standardsyntax deklarerad som sist:

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

IE10 (den första stabila versionen av IE som stöds transition-delay) kräver inte -ms-prefixet.

Ett vanligt användningsfall är stagging-övergångar:

Se Pen
Staggered Animations av Chris Coyier (@chriscoyier)
på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.