Le transizioni CSS consentono di modificare i valori delle proprietà CSS nel tempo, creando un effetto animato. Ciò può aggiungere un elemento visivo coinvolgente al design del tuo sito web.
Per utilizzare le transizioni CSS, segui i seguenti passaggi:
1. Indica la proprietà CSS che desideri animare. Ad esempio, se desideri animare il colore di sfondo di un elemento, potresti scrivere:
```
div {
background-color: blue;
}
```
1. Indica il valore di partenza e di arrivo per la proprietà. Ad esempio, se desideri che il colore di sfondo cambi da blu a rosso quando l’utente passa il mouse sull’elemento, potresti scrivere:
```
div {
background-color: blue;
transition: background-color 2s;
}
div:hover {
background-color: red;
}
```
Nel codice di cui sopra, `background-color 2s` è una istruzione di transizione. Dice al browser di animare la proprietà `background-color` durante un periodo di 2 secondi.
1. Hai anche la possibilità di personalizzare ulteriormente l’animazione specificando un ritardo o un “tempo di durata”. Ad esempio, se desideri che l’animazione inizi con un ritardo di 1 secondo, potresti scrivere:
```
div {
background-color: blue;
transition: background-color 2s 1s;
}
div:hover {
background-color: red;
}
```
Nel codice di cui sopra, `background-color 2s 1s` dice al browser di iniziare l’animazione 1 secondo dopo che l’utente ha passato il mouse sull’elemento e di completarla in 2 secondi.
Oltre alle proprietà del colore, puoi animare molte altre proprietà CSS, tra cui larghezza, altezza, margini, padding, opacità e molto altro.
