Właściwość transition-duration
Właściwość transition-duration ustawia
czas trwania płynnego przejścia transition.
Składnia
selektor {
transition-duration: czas w s lub ms;
}
Wartości
| Wartość | Opis |
|---|---|
s |
Określa czas w sekundach (na przykład 3s).
Można podawać wartości ułamkowe,
na przykład 0.5s - pół sekundy.
|
ms |
Określa czas w milisekundach (na przykład 3ms).
Jedna sekunda to 1000 milisekund.
|
Wartość domyślna: 0s.
Przykład
Najedź myszką na blok - on płynnie zmieni
swoją szerokość przez 2 sekundy.
<div id="elem"></div>
#elem {
transition-duration: 2s;
transition-property: width;
border: 1px solid black;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Zobacz też
-
właściwość
transition-property,
która określa nazwę właściwości dla płynnego przejścia -
właściwość
transition-delay,
która określa opóźnienie przed płynnym przejściem -
właściwość
transition-timing-function,
która określa funkcję czasową dla płynnego przejścia -
właściwość
transition,
która jest skrótem dla płynnego przejścia -
właściwość
animation,
za pomocą której można zrobić animację