Xususiyyat transition-delay
Xususiyyat transition-delay
transition hamar transformasiyasinin baslamasindan evvel gecikme teyin edir.
Sintaksis
selektor {
transition-delay: s ve ya ms ile vaxt;
}
Deyerler
| Deyer | Izah |
|---|---|
s |
Vaxti saniyelerle teyin edir (meselen 3s).
Kesir deyerler teyin etmek olar,
meselen, 0.5s - yarim saniye.
|
ms |
Vaxti millisaniyelerle teyin edir (meselen 3ms).
Bir saniye 1000 millisaniyedir.
|
Standart deyer: 0s.
Numune
Blokun uzerine sichqoncu gətirin - 3 saniye
heç ne baş vermeyecek (3s gecikme var),
sonra isə o enini 2 saniyede hamar deyişecek.
Əgər sonra sichqonu kenara cəksəniz
- yenə 3 saniye heç ne baş vermeyecek,
sonra isə en hamar şəkildə azalaraq ilkin deyerine qayidacaq:
<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;
}
:
Numune
Blokun uzerine sichqoncu gətirin - o evvelce enini
2 saniyede deyişecek, sonra isə
hundurluyunu 4 saniyede deyişecek.
Xususiyyetler ardicil olaraq deyişecek,
çunki hundurluk ucun 3 saniye gecikme var
(enin deyişme vaxti). Əgər sichqonu kenara cəksəniz
- deyişiklikler ters ardicilliqla baş verəcək:
evvel eni azalacaq, sonra isə hundurluyu azalacaq:
<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;
}
:
Həmçinin bax
-
xususiyyat
transition-property,
hamar transformasiya ucun xususiyyetin adini teyin edir -
xususiyyat
transition-duration,
hamar transformasiyanin muddetini teyin edir -
xususiyyat
transition-timing-function,
hamar transformasiya ucun vaxt funksiyasini teyin edir -
xususiyyat
transition,
hamar transformasiya ucun qisaltmadir -
xususiyyat
animation,
köməyi ilə animasiya yaratmaq olar