A transition tulajdonság

A transition tulajdonság egy rövidítés az átmenetekhez, lehetővé teszi, hogy egyszerre megadhassuk a transition-duration, transition-property, transition-timing-function és a transition-delay tulajdonságokat.

Szintaxis

cssselector {
  transition: érték;
}

A tulajdonságok sorrendje nem számít, azonban a végrehajtási idő (transition-duration) a késleltetés (transition-delay) elé kell, hogy kerüljön.

Értékek

Lásd a megfelelő tulajdonságokat. Alapértelmezett érték: all 0s ease 0s.

A none érték minden átmenetet visszavon (azok azonnal megtörténnek).

Példa

Vigyéda az egérmutatót a blokkra - 3 másodpercig nem fog semmi történni (van egy 3s késleltetés), majd a blokk simán megváltoztatja a szélességét 2 másodperc alatt. Ha ezután elhúzzuk az egeret - újra 3 másodpercig nem fog semmi történni, majd a szélesség simán csökkenni fog az eredeti értékre:

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

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

Результат:

Lásd még