Den transition-delayegenskab, der normalt anvendes som led i transitionstenografi, der bruges til at definere en længde af tid til at forsinke starten af en overgang.
.delay-me ( transition-delay: 0.25s; )Værdien kan være en af følgende:
- En gyldig tidsværdi defineret i sekunder eller millisekunder, fx
1.3seller125ms - En komma-adskilt liste over tidsværdier til at definere separate forsinkelsesværdier ved flere overgange for et enkelt element, f.eks
1s background-color, 350ms transform
Standardværdien for transition-delayer 0s, hvilket betyder, at der ikke finder nogen forsinkelse sted, og overgangen begynder at ske med det samme. Tidsværdien kan udtrykkes som et decimalbaseret tal for en mere præcis timing.
Når en overgang har en forsinkelsesværdi, der er negativ, vil den medføre, at overgangen begynder med det samme (uden forsinkelse), men overgangen begynder imidlertid halvvejs gennem processen, som om den allerede var begyndt.
Følgende pen viser en svævende effekt på en boks, der bruger en transition-delayværdi 2smed en overgangsvarighed på 1s:
Se Pen
Transition forsinkelsesdemo af CSS-Tricks (@ css-tricks)
på CodePen.
Sammenlign det nu med følgende demo, som har en forsinkelse på -1sog en varighed på 3s:
Se Pen
Negative overgangsforsinkelsesdemo af CSS-Tricks (@ css-tricks)
på CodePen.
Bemærk, at i det andet eksempel er kun de sidste to tredjedele af den aktuelle overgang synlige, og der er ingen forsinkelse. Den negative værdi fjerner forsinkelsen og skærer effektivt ind i varigheden.
For kompatibilitet i alle understøttende browsere kræves leverandørpræfikser med standardsyntaxen erklæret sidst:
.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )IE10 (den første stabile version af IE, der understøtter transition-delay) kræver ikke -ms-præfikset.
En almindelig brugssag er svimlende overgange:
Se Pen
Staggered Animations af Chris Coyier (@chriscoyier)
på CodePen.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 6,0-6,1 * |