Ominaisuus transition-property

Ominaisuus transition-property asettaa ominaisuuden, joka animoidaan sulavalla siirtymällä transition. Arvoksi tulee antaa CSS-ominaisuuden nimi, joka animoidaan. Jos annetaan arvo all (se on oletusarvo) - kaikki ominaisuudet animoidaan yhtä aikaa.

Syntaksi

cssvalitsija {
  transition-property: arvo;
}

Esimerkki

Vie hiiri laatikon päälle - se muuttaa leveyttään sulavasti, koska transition-property on saanut arvon 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;
}

Результат:

Esimerkki . Arvo all

Tässä esimerkissä transition-property on saanut arvon all - siksi sulavasti muuttuvat kaikki tilalle hover kirjoitetut ominaisuudet (meidän tapauksessamme ne ovat width ja height). Kaikki muutokset tapahtuvat samassa ajassa, joka on asetettu kohteessa 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;
}

Результат:

Katso myös