Overgangsvertraging - CSS-trucs

De transition-delayeigenschap, die normaal gesproken wordt gebruikt als onderdeel van een transitionsteno, wordt gebruikt om een tijdsduur te definiëren om de start van een overgang te vertragen.

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

De waarde kan een van de volgende zijn:

Een geldige tijdwaarde gedefinieerd in seconden of milliseconden, bijv. 1.3sOf125ms
Een door komma's gescheiden lijst met tijdwaarden, voor het definiëren van afzonderlijke vertragingswaarden op meerdere overgangen voor een enkel element, bijv 1s background-color, 350ms transform

De standaardwaarde voor transition-delayis 0s, wat betekent dat er geen vertraging optreedt en dat de overgang onmiddellijk begint. De tijdwaarde kan worden uitgedrukt als een decimaal getal voor een nauwkeurigere timing.

Wanneer een overgang een vertragingswaarde heeft die negatief is, zal de overgang onmiddellijk beginnen (zonder vertraging), maar de overgang zal halverwege het proces beginnen, alsof het al begonnen is.

De volgende pen toont een zweefeffect op een vak dat een transition-delaywaarde gebruikt 2smet een overgangsduur van 1s:

Zie de
demo over de vertraging
van de penovergang door CSS-Tricks (@ css-tricks) op CodePen.

Vergelijk dat nu met de volgende demo, die een vertraging -1sen een duur heeft van 3s:

Zie de
Demo Negatieve overgangsvertraging van Pen door CSS-Tricks (@ css-tricks)
op CodePen.

Merk op dat in het tweede voorbeeld alleen het laatste tweederde van de daadwerkelijke overgang zichtbaar is en er geen vertraging is. De negatieve waarde verwijdert de vertraging en verkort effectief de duur.

Voor compatibiliteit in alle ondersteunende browsers zijn leveranciersvoorvoegsels vereist, waarbij de standaardsyntaxis als laatste wordt verklaard:

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

IE10 (de eerste stabiele versie van IE die wordt ondersteund transition-delay) vereist geen -ms-prefix.

Een veelvoorkomend gebruik zijn tijdelijke overgangen:

Zie de Pen
Staggered Animations van Chris Coyier (@chriscoyier)
op CodePen.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.