La proprietà di transizione in CSS permette di creare effetti di animazione fluida tra i cambiamenti di una determinata proprietà CSS. Può essere utilizzata per cambiare gradualmente il valore di una proprietà da uno stato iniziale a uno stato finale nel tempo.
Ecco come si utilizza la proprietà di transizione in CSS:
```
elemento {
transition: nome-proprietà durata-timing-funzione ritardo;
}
```
- `nome-proprietà`: è il nome della proprietà CSS a cui si desidera aggiungere l’effetto di transizione. Per esempio, se si desidera che il colore dello sfondo cambi gradualmente, si può usare `background-color`.
- `durata`: è la durata della transizione. Questo valore viene di solito specificato in secondi (s) o millisecondi (ms).
- `timing-funzione`: è la curva di velocità della transizione. Puoi scegliere tra varie funzioni predefinite come `linear`, `ease`, `ease-in`, `ease-out`, ecc.
- `ritardo`: è il tempo di attesa prima che inizi la transizione. Anche questo valore viene di solito specificato in secondi (s) o millisecondi (ms).
Ecco un esempio di come utilizzare l’effetto di transizione in CSS:
```
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 200px;
}
```
In questo esempio, quando si passa il mouse sopra il div, la sua larghezza cambierà da 100px a 200px in 2 secondi.
