Creare un’animazione in CSS può sembrare un compito impressionante in un primo momento, ma in realtà è abbastanza semplice una volta che si impara la sintassi. Ecco un esempio di una semplice animazione CSS che farà ruotare un elemento:
```
/* Definizione dell’animazione */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Applicazione dell’animazione all’elemento */
.my-element {
animation: rotate 2s infinite; /* Nome dell’animazione, durata, ripetizione */
}
```
Nell’esempio sopra, definiamo un’animazione chiamata `rotate` utilizzando la direttiva `@keyframes`. L’animazione avrà due fasi: la fase `from` inizierà con l’elemento che non ruota (0 gradi), e la fase `to` terminerà con l’elemento ruotato di 360 gradi.
Quindi, applichiamo l’animazione all’elemento con la classe `my-element` utilizzando la proprietà `animation`. Il valore di `animation` è una lista di parametri separati da spazi: il nome dell’animazione (`rotate`), la durata dell’animazione (2 secondi), e il numero di volte che l’animazione dovrebbe ripetersi (`infinite` indica che l’animazione dovrebbe ripetersi all’infinito).
È possibile personalizzare ulteriormente l’animazione aggiungendo più fasi, giocando con la durata e il ritardo dell’animazione, e modificando il comportamento di riempimento e direzione dell’animazione. Si prega di controllare la documentazione ufficiale di CSS per maggiori informazioni su come personalizzare le animazioni CSS.
