A cosa servono i keyframe e come funzionano?

@keyframes — regola CSS che definisce i fotogrammi chiave di un'animazione. Permette di creare una sequenza di stati di un elemento in diversi momenti nel tempo, che il browser interpolerà in modo fluido, creando un effetto di movimento. Funziona definendo un insieme di stili per l'elemento a determinate percentuali di tempo (dal 0% al 100%) o usando le parole chiave from (0%) e to (100%).

Per usare keyframes è necessario:

1. Definire la regola @keyframes con un nome univoco.
2. All'interno di @keyframes, specificare gli stili per vari punti temporali (in percentuale o from/to).
3. Applicare l'animazione creata all'elemento usando la proprietà CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Stato iniziale: nessuno spostamento in X
  }

  to {
    transform: translateX(100%); // Stato finale: spostamento al 100% in X
  }
}

.element {
  animation-name: slidein; // Nome dell'animazione definito sopra
  animation-duration: 3s; // Durata dell'animazione
  animation-timing-function: ease-in-out; // Funzione di velocità dell'animazione
  animation-delay: 1s; // Ritardo prima di iniziare l'animazione
  animation-iteration-count: infinite; // Numero di ripetizioni (qui infinito)
  animation-direction: alternate; // Direzione dell'animazione (normale, poi inversa)
}

Proprietà principali di animation, usate insieme a @keyframes:

Proprietà	Descrizione
animation-name	Nome di @keyframes da applicare.
animation-duration	Durata di un ciclo di animazione (ad esempio, 2s, 500ms).
animation-timing-function	Funzione di velocità dell'animazione (ad esempio, linear, ease, ease-in, cubic-bezier).
animation-delay	Ritardo prima di iniziare l'animazione (ad esempio, 1s).
animation-iteration-count	Numero di ripetizioni dell'animazione (infinite per ripetizione infinita).
animation-direction	Direzione dell'animazione (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Determina quali stili vengono applicati all'elemento prima e dopo l'animazione.
animation-play-state	Determina se l'animazione è in esecuzione o in pausa.