Omadus transition

Omadus transition on lühend sujuvateks üleminekuteks, võimaldab korraga määrata transition-duration, transition-property, transition-timing-function ja transition-delay.

Süntaks

cssvalija {
  transition: väärtus;
}

Omaduste järjekord ei oma tähtsust, kuid kestvus (transition-duration) peab asuma enne viivitusi (transition-delay).

Väärtused

Vaata vastavaid omadusi. Vaikeväärtus: all 0s ease 0s.

Väärtus none tühistab kõik üleminekud (need toimuvad silmapilkselt).

Näide

Liigutage kursorit ploki kohale - 3 sekundi jooksul ei juhtu midagi (on seatud viivitus 3s), seejärel muudab see sujuvalt oma laiust 2 sekundiga. Kui seejärel kursor eemaldada - siis jälle 3 sekundit ei juhtu midagi, seejärel laius väheneb sujuvalt tagasi algväärtuseni:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vaata ka