Omadus transition-property

Omadus transition-property määrab omaduse, mida animeeritakse sujuba üleminekuga transition. Väärtuseks tuleks anda CSS-i omaduse nimi, mida animeeritakse. Kui määrata väärtuseks all (see on vaikimisi seatud) - animeeritakse kõik omadused korraga.

Süntaks

cssvalija {
  transition-property: väärtus;
}

Näide

Hõljutage kursorit ploki kohal - see muudab sujuvalt oma laiust, kuna transition-property omab väärtust width:

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

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

Результат:

Näide . Väärtus all

Selles näites on transition-property väärtuseks all - seetõttu muutuvad sujuvalt kõik olekus hover kirjutatud omadused (meie puhul see on width ja height). Kõik muutused toimuvad ühe ajaga, mis on määratud omaduses transition-duration:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Vaata ka