Egenskapen transition-duration
Egenskapen transition-duration ställer in
tiden för utförandet av en mjuk övergång transition.
Syntax
selektor {
transition-duration: tid i s eller ms;
}
Värden
| Värde | Beskrivning |
|---|---|
s |
Anger tid i sekunder (till exempel 3s).
Det går att ange decimalvärden,
till exempel, 0.5s - en halv sekund.
|
ms |
Anger tid i millisekunder (till exempel 3ms).
En sekund är 1000 millisekunder.
|
Standardvärde: 0s.
Exempel
För musen över blocket - det kommer mjukt att ändra
sin bredd på 2 sekunder.
<div id="elem"></div>
#elem {
transition-duration: 2s;
transition-property: width;
border: 1px solid black;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Se även
-
egenskapen
transition-property,
som anger egenskapsnamnet för en mjuk övergång -
egenskapen
transition-delay,
som anger fördröjningen före en mjuk övergång -
egenskapen
transition-timing-function,
som anger tidsfunktionen för en mjuk övergång -
egenskapen
transition,
som är en förkortning för mjuk övergång -
egenskapen
animation,
som kan användas för att skapa en animation