Vlastnost transition

Vlastnost transition je zkratka pro plynulé přechody, umožňuje současně nastavit transition-duration, transition-property, transition-timing-function a transition-delay.

Syntaxe

cssselektor {
  transition: hodnota;
}

Pořadí vlastností nemá význam, avšak doba trvání (transition-duration) musí být před zpožděním (transition-delay).

Hodnoty

Viz příslušné vlastnosti. Výchozí hodnota: all 0s ease 0s.

Hodnota none zruší všechny přechody (budou probíhat okamžitě).

Příklad

Najeďte myší na blok - 3 sekundy se nic nestane (je nastaveno zpoždění 3s), a poté plynule změní svou šířku za 2 sekundy. Pokud poté myš odeberete - opět 3 sekundy se nic nestane, a poté se šířka 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;
}

Результат:

Viz také