Animazioni CSS

Le animazioni CSS offrono un modo sofisticato per migliorare l'esperienza utente con transizioni ed effetti visivi fluidi e accattivanti. In questa guida completa esploriamo le sfumature delle animazioni CSS, fornendo spiegazioni dettagliate, esempi e best practice per creare design dinamici e responsivi.

Introduzione alle animazioni CSS

Le animazioni CSS consentono agli sviluppatori web di animare gli elementi HTML senza ricorrere a JavaScript. Vengono definite tramite i keyframe, che specificano gli stili nei vari punti della sequenza di animazione.

Esempio base di animazione CSS

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Proprietà principali delle animazioni CSS

• animation-name: specifica il nome dei keyframe.
• animation-duration: definisce la durata dell'animazione.
• animation-timing-function: imposta la curva di velocità dell'animazione.
• animation-delay: ritarda l'avvio dell'animazione.
• animation-iteration-count: definisce il numero di volte in cui l'animazione deve essere riprodotta.
• animation-direction: specifica se l'animazione deve essere riprodotta in senso inverso nei cicli alternati.

Applicare più animazioni

È possibile applicare più animazioni a un singolo elemento separandole con delle virgole.

<div class="multi-animated-box"></div>

<style>
  .multi-animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 4s infinite, rotate 2s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }

  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Tecniche avanzate

Animazioni responsive

Assicurati che le animazioni siano responsive e si adattino a diverse dimensioni dello schermo.

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 50vw;
    height: 50vw;
    background-color: green;
    animation: resize 4s infinite;
  }

  @keyframes resize {
    0% { width: 50vw; height: 50vw; }
    50% { width: 70vw; height: 70vw; }
    100% { width: 50vw; height: 50vw; }
  }
</style>

Combinare le trasformazioni

Combina più proprietà di trasformazione per creare animazioni complesse.

<div class="complex-transform-box"></div>

<style>
  .complex-transform-box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    animation: complexTransform 5s infinite;
  }

  @keyframes complexTransform {
    0% {
      transform: translateX(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateX(200px) rotate(180deg) scale(1.5);
    }
    100% {
      transform: translateX(0) rotate(360deg) scale(1);
    }
  }
</style>

Modalità di riempimento dell'animazione

La proprietà animation-fill-mode definisce come un'animazione CSS applica gli stili al suo elemento target prima e dopo l'esecuzione.

<div class="fill-mode-box"></div>

<style>
  .fill-mode-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: fillMode 3s forwards;
  }

  @keyframes fillMode {
    0% { background-color: purple; }
    100% { background-color: orange; }
  }
</style>

Ritardi e funzioni di temporizzazione delle animazioni

Utilizza i ritardi e le funzioni di temporizzazione per controllare il ritmo e l'avvio delle animazioni.

<div class="timing-function-box"></div>

<style>
  .timing-function-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: timingFunction 4s ease-in-out infinite;
  }

  @keyframes timingFunction {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
  }
</style>

Best practice per le animazioni CSS

1. Ridurre al minimo l'utilizzo della CPU: mantieni le animazioni semplici per evitare un eccessivo consumo della CPU, che può degradare le prestazioni soprattutto sui dispositivi mobili.
2. Usare l'accelerazione hardware: utilizza le proprietà transform e opacity per sfruttare l'accelerazione GPU.
3. Fallback: fornisci stili di fallback per i browser che non supportano le animazioni.
4. Test delle prestazioni: testa le animazioni su dispositivi e browser diversi per garantire prestazioni fluide.

Esempio di animazione ben ottimizzata

<div class="optimized-box"></div>

<style>
  .optimized-box {
    width: 100px;
    height: 100px;
    background-color: cyan;
    animation: optimizedMove 3s ease-in-out infinite;
  }

  @keyframes optimizedMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(200px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
  }
</style>

Controllare le animazioni CSS con JavaScript

CSS gestisce il rendering di un'animazione in modo efficiente, ma non sa quando un'animazione deve essere eseguita né cosa deve accadere dopo il suo completamento. Quella logica decisionale appartiene a JavaScript. Il pattern più comune è: definire l'animazione in CSS, poi lasciare che JavaScript aggiunga o rimuova una classe per avviarla o fermarla.

In questo modo il playback fluido e accelerato dalla GPU rimane in CSS, mentre il codice mantiene il controllo sul timing e sulle azioni successive.

Avviare e fermare con l'alternanza di classi

Inserisci l'animazione su una classe invece che sul selettore base, poi alterna quella classe:

<button id="play">Play</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: teal;
  }
  /* The animation only runs while this class is present */
  #box.run {
    animation: slide 1s ease-in-out;
  }
  @keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(200px); }
  }
</style>

<script>
  const box = document.getElementById('box');
  document.getElementById('play').onclick = () => {
    // Toggle: add the class to play, the CSS animation does the rest
    box.classList.add('run');
  };
</script>

Poiché l'animazione vive sulla classe .run, rimuovere la classe la ferma istantaneamente e ripristinarla la fa ripartire dall'inizio.

Ascoltare la fine: transitionend e animationend

Il principale vantaggio di gestire le animazioni da JavaScript è che il browser genera eventi DOM a cui puoi reagire. Questo ti consente di concatenare passaggi, rimuovere classi o eseguire codice esattamente quando un effetto si completa — senza indovinare con fragili setTimeout.

• Per le transizioni CSS, l'evento transitionend si attiva al termine di una transizione.
• Per le animazioni CSS (@keyframes), si attivano tre eventi: animationstart, animationiteration (una volta per ogni ciclo) e animationend.

<button id="fade">Fade out</button>
<div id="panel">Hello</div>

<style>
  #panel {
    width: 150px;
    padding: 20px;
    background: gold;
    transition: opacity 0.5s;
  }
  #panel.hidden { opacity: 0; }
</style>

<script>
  const panel = document.getElementById('panel');

  document.getElementById('fade').onclick = () => panel.classList.add('hidden');

  // Runs the moment the fade completes — not a guessed delay
  panel.addEventListener('transitionend', (event) => {
    console.log(`Transition of "${event.propertyName}" finished`);
    panel.style.display = 'none'; // safe to hide only now
  });
</script>

Al termine della transizione, la console registra:

Transition of "opacity" finished

Leggere i dettagli degli eventi: propertyName e animationName

Gli eventi di animazione portano dati utili. Quando sono coinvolte più proprietà o animazioni, spesso è necessario sapere quale ha appena terminato.

• event.propertyName — la proprietà CSS che ha effettuato la transizione (su transitionend).
• event.animationName — il nome dei @keyframes (sui tre eventi di animazione).
• event.elapsedTime — secondi di tempo di esecuzione, escluso qualsiasi animation-delay.

<div id="bouncer">Watch the console</div>

<style>
  #bouncer { animation: bounce 0.6s ease 3; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30px); }
  }
</style>

<script>
  const el = document.getElementById('bouncer');

  el.addEventListener('animationstart', (e) =>
    console.log(`start: ${e.animationName}`));

  el.addEventListener('animationiteration', (e) =>
    console.log(`loop of ${e.animationName} at ${e.elapsedTime}s`));

  el.addEventListener('animationend', (e) =>
    console.log(`end: ${e.animationName} (total ${e.elapsedTime}s)`));
</script>

Con animation: bounce 0.6s ease 3 (tre iterazioni), la console registra start, due eventi animationiteration (inizio del 2° e del 3° ciclo), poi end a 1.8s totali.

Animazioni guidate da JS o da CSS: quale scegliere?

Un approccio ibrido pratico combina il meglio di entrambi: CSS descrive l'effetto, JavaScript decide quando viene eseguito e cosa accade dopo tramite gli eventi descritti sopra. Quando hai davvero bisogno di controllo per singolo fotogramma, utilizza Animazioni JavaScript con requestAnimationFrame, oppure la Web Animations API per costruire e controllare le animazioni interamente nel codice.

Conclusione

Le animazioni CSS sono uno strumento potente per creare esperienze web dinamiche e coinvolgenti. Padroneggiando i keyframe, le proprietà delle animazioni e le tecniche avanzate, gli sviluppatori possono produrre animazioni di livello professionale che migliorano l'interazione con l'utente. Sperimenta con diverse animazioni, testa accuratamente e rispetta le best practice per ottenere i migliori risultati.

Esercitazione