Tranziții CSS. Cum se utilizează tranzițiile CSS? Proprietatea width.

Cum se utilizează tranzițiile CSS?

Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:
 

• proprietatea CSS la care doriți să adăugați un efect
• durata efectului

Notă: Dacă partea de durată nu este specificată, tranziția nu va avea niciun efect, deoarece valoarea implicită este 0.

Următorul exemplu prezintă un element <div> 100px * 100px red. Elementul <div> a specificat, de asemenea, un efect de tranziție pentru proprietatea de lățime, cu o durată de 2 secunde:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Efectul de tranziție va începe atunci când proprietatea CSS (lățimea/width) specificată modifică valoarea.
Acum, să specificăm o nouă valoare pentru proprietatea de lățime/width atunci când un utilizator se alătură peste elementul <div>:

Exemplu:

div:hover {
  width: 300px;
}

Observați că atunci când cursorul se decuplează din element, acesta se va schimba treptat înapoi la stilul său original.