Proprietatea transition

Proprietatea transition este o scurtătură pentru tranzițiile line, permite stabilirea simultană a transition-duration, transition-property, transition-timing-function și transition-delay.

Sintaxă

cssselector {
  transition: valoare;
}

Ordinea proprietăților nu contează, însă timpul de execuție (transition-duration) trebuie să fie înaintea întârzierii (transition-delay).

Valori

Consultați proprietățile corespunzătoare. Valoarea implicită: all 0s ease 0s.

Valoarea none anulează toate tranzițiile (acestea vor avea loc instantaneu).

Exemplu

Puneți cursorul mouse-ului peste bloc - timp de 3 secunde nu se va întâmpla nimic (există o întârziere de 3s), apoi acesta își va modifica lin lățimea timp de 2 secunde. Dacă apoi îndepărtați cursorul - din nou timp de 3 secunde nu se va întâmpla nimic, apoi lățimea se va micșora lin la valoarea inițială:

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

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

Результат:

Vedeți și