Svojstvo transition-delay
Svojstvo transition-delay postavlja
odlaganje pre pokretanja prelaza
transition.
Sintaksa
selektor {
transition-delay: vreme u s ili ms;
}
Vrednosti
| Vrednost | Opis |
|---|---|
s |
Određuje vreme u sekundama (na primer 3s).
Moguće je zadati decimalne vrednosti,
na primer, 0.5s - pola sekunde.
|
ms |
Određuje vreme u milisekundama (na primer 3ms).
Jedna sekunda je 1000 milisekundi.
|
Podrazumevana vrednost: 0s.
Primer
Pređite mišem preko bloka - 3 sekunde
ništa se neće događati (postavljeno je odlaganje od
3s), a zatim će on postepeno promeniti svoju širinu
za 2 sekunde. Ako zatim sklonite miš
- opet će 3 sekunde ništa
da se dešava, a zatim će se širina postepeno smanjiti
na početnu vrednost:
<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;
}
:
Primer
Pređite mišem preko bloka - on će prvo promeniti
svoju širinu za 2 sekunde, a zatim
će promeniti svoju visinu za 4 sekunde.
Svojstva će se menjati uzastopno,
pošto je za visinu postavljeno odlaganje od 3
sekunde (vreme promene širine). Ako sklonite
miš - promene će se desiti obrnutim
redosledom: prvo će se smanjiti širina, a zatim
će se smanjiti visina:
<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;
}
:
Pogledajte takođe
-
svojstvo
transition-property,
koje određuje naziv svojstva za postepeni prelaz -
svojstvo
transition-duration,
koje određuje trajanje postepenog prelaza -
svojstvo
transition-timing-function,
koje određuje vremensku funkciju za postepeni prelaz -
svojstvo
transition,
koje je skraćenica za postepeni prelaz -
svojstvo
animation,
pomoću kojeg možete napraviti animaciju