Den transition-delayegenskap, som normalt brukes som en del av transitionen kortform, blir brukt til å definere en tidslengde til å utsette starten av en overgang.
.delay-me ( transition-delay: 0.25s; )Verdien kan være en av følgende:
- En gyldig tidsverdi definert i sekunder eller millisekunder, f.eks.
1.3sEller125ms - En komma-separert liste over tidsverdier, for å definere separate forsinkelsesverdier på flere overganger for et enkelt element, f.eks
1s background-color, 350ms transform
Standardverdien for transition-delayer 0s, noe som betyr at ingen forsinkelse vil finne sted, og overgangen vil begynne å skje umiddelbart. Tidsverdien kan uttrykkes som et desimalbasert tall for mer presis timing.
Når en overgang har en forsinkelsesverdi som er negativ, vil den føre til at overgangen begynner umiddelbart (uten forsinkelse), men overgangen vil imidlertid begynne halvveis i prosessen, som om den allerede hadde startet.
Følgende penn viser en sveveeffekt på en boks som bruker en transition-delayverdi 2smed en overgangsvarighet på 1s:
Se
forsinkelsesdemoen for Pen Transition av CSS-Tricks (@ css-tricks)
på CodePen.
Sammenlign det nå med følgende demo, som har en forsinkelse på -1sog en varighet på 3s:
Se pennegativ
overgangsforsinkelsesdemo av CSS-Tricks (@ css-tricks)
på CodePen.
Legg merke til at i det andre eksemplet er bare de siste to tredjedeler av den faktiske overgangen synlig, og det er ingen forsinkelse. Den negative verdien fjerner forsinkelsen og kutter effektivt inn varigheten.
For kompatibilitet i alle støttende nettlesere kreves leverandørprefikser, med standardsyntaks deklarert sist:
.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )IE10 (den første stabile versjonen av IE som støtter transition-delay) krever ikke -ms-prefikset.
En vanlig brukssak er svimlende overganger:
Se Pen
Staggered Animations av Chris Coyier (@chriscoyier)
på CodePen.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5,1 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 6,0-6,1 * |