Transition-delay hossasy

transition-delay hossasy transition üýtgeme geçişiniň başlamazyndan ozal gözlegi kesgitleýär.

Sintaksis

selektor {
	transition-delay: s ýa-da ms-daky wagt;
}

Bahalar

Baha	Düşündiriş
`s`	Wagty sekuntlarda kesgitleýär (mysal üçin `3s`). Kesir bahalar hem berlip bolýar, mysal üçin, `0.5s` - sekundyň ýarymy.
`ms`	Wagty millisekuntlarda kesgitleýär (mysal üçin `3ms`). Bir sekunt `1000` millisekunda deňdir.

Bölünük bahasy: 0s.

Mysal

Çüýşeni blogyň üstüne getiriň - 3 sekunt hiç zat bolmaz (3s gözleg berlipdir), soňra ol öz inişligini 2 sekuntda üýtgeder. Eger çüýşeni aýyrsaňyz - ýene 3 sekunt hiç zat bolmaz, soňra inişlik başlangyç bahasyna çenli kemelýär:

<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;
}

Mysal

Çüýşeni blogyň üstüne getiriň - ol ilki başda öz inişligini 2 sekuntda üýtgeder, soňra öz beýikligini 4 sekuntda üýtgeder. Hassalar birin-bir üýtgäp geçer, sebäbi beýiklik üçin 3 sekunt gözleg kesgitlendi (inişligiň üýtgemek wagty). Eger çüýşeni aýyrsaňyz - üýtgeşmeler tersine tertipde bolar: ilki inişlik kemeler, soňra beýiklik kemeler:

<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;
}

Mysal hem görüň

transition-property hossasy,
üýtgeme geçişi üçin hossanyň adyny kesgitleýär
transition-duration hossasy,
üýtgeme geçişiniň dowamlylygyny kesgitleýär
transition-timing-function hossasy,
üýtgeme geçişi üçin wagt funksiýasyny kesgitleýär
transition hossasy,
üýtgeme geçişi üçin gysgaldylan görnüş
animation hossasy,
onuň ýardamy bilen animasiýa ýasap bolýar