Vlastnosť transition

Vlastnosť transition je skratka pre plynulé prechody, umožňuje súčasne nastaviť transition-duration, transition-property, transition-timing-function a transition-delay.

Syntax

cssselektor {
  transition: hodnota;
}

Poradie vlastností nemá význam, avšak doba trvania (transition-duration) musí byť pred oneskorením (transition-delay).

Hodnoty

Pozri príslušné vlastnosti. Predvolená hodnota: all 0s ease 0s.

Hodnota none zruší všetky prechody (prebiehať budú okamžite).

Príklad

Prejdite myšou nad blok - 3 sekundy sa nič nestane (je nastavené oneskorenie 3s), potom plynule zmení svoju šírku počas 2 sekúnd. Ak potom myš odstránite - znova sa 3 sekundy nič nestane, potom sa šírka plynule zmenší na pôvodnú hodnotu:

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

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

Результат:

Pozrite tiež