Le animazioni possono creare effetti complessi e dinamici per migliorare l'esperienza interattiva dell'utente. Le animazioni non richiedono un evento di attivazione specifico e possono essere impostate per ripetersi all'infinito. Inoltre, le animazioni possono avere molteplici stati intermedi tra lo stato iniziale e quello finale, offrendo maggiore flessibilità e controllo sugli effetti visivi prodotti.

Creazione di un'animazione

È possibile creare animazioni utilizzando la regola @keyframes, che definisce un insieme di stili CSS in diversi punti di un'animazione. Inoltre, si assegna un nome all'animazione. Il nome deve essere descrittivo, ovvero indicare il tipo di animazione.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Per determinare la variazione delle proprietà in un momento specifico, si possono utilizzare le parole chiave: from (0%) e to (100%). Più frequentemente, vengono utilizzati i valori percentuali.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Dopo aver dichiarato l'animazione, è possibile utilizzare il nome dei keyframes come valore per la proprietà animation-name su diversi elementi. Un ulteriore vantaggio delle animazioni è che possono essere applicate ripetutamente a più elementi.

selector {
  animation-name: AnimationName;
}

Pratica

Aggiunta di un'animazione all'elemento div. L'obiettivo è modificare la proprietà background-color nel tempo. Lo stato iniziale sarà green, poi al 60% dovrà diventare red, e nello stato finale dovrà essere blue. Inoltre, verrà specificata la proprietà animation-duration per osservare l'animazione in esecuzione.