Egenskapen transition-delay
Egenskapen transition-delay setter
en forsinkelse før start av en jevn overgang
transition.
Syntaks
velger {
transition-delay: tid i s eller ms;
}
Verdier
| Verdi | Beskrivelse |
|---|---|
s |
Angir tid i sekunder (for eksempel 3s).
Kan angi desimalverdier,
for eksempel 0.5s - et halvt sekund.
|
ms |
Angir tid i millisekunder (for eksempel 3ms).
Ett sekund er 1000 millisekunder.
|
Standardverdi: 0s.
Eksempel
Hold musepekeren over boksen - i 3 sekunder
vil ingenting skje (det er en forsinkelse på
3s), og deretter vil den jevnt endre sin bredde
over 2 sekunder. Hvis du deretter fjerner musen
- vil det igjen i 3 sekunder ikke skje noe,
og deretter vil bredden jevnt reduseres
tilbake til utgangsverdien:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Eksempel
Hold musepekeren over boksen - den vil først endre
sin bredde over 2 sekunder, og deretter
vil den endre sin høyde over 4 sekunder.
Egenskapene vil endres sekvensielt,
siden for høyde er det satt en forsinkelse på 3
sekunder (tiden for breddeendringen). Hvis du fjerner
musepekeren - vil endringene skje i omvendt
rekkefølge: først vil bredden reduseres, og deretter
vil høyden reduseres:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
Se også
-
egenskapen
transition-property,
som angir egenskapsnavnet for jevn overgang -
egenskapen
transition-duration,
som angir varigheten for jevn overgang -
egenskapen
transition-timing-function,
som angir tidsfunksjonen for jevn overgang -
egenskapen
transition,
som er en forkortelse for jevn overgang -
egenskapen
animation,
som kan brukes til å lage animasjon