Guida CSS interattiva: Animazioni CSS

Q: Come si crea un'animazione in CSS?

Definisci i passaggi con @keyframes name { from { ... } to { ... } }, poi applicala a un elemento con la proprietà animation e una durata: animation: name 1s ease-out;. La durata è obbligatoria, perché il suo valore predefinito è 0s.

Q: Come faccio a ripetere un'animazione CSS all'infinito?

Imposta animation-iteration-count: infinite, oppure aggiungi infinite alla forma abbreviata: animation: spin 1s linear infinite;. Aggiungi alternate per riprodurla in avanti e poi all'indietro a ogni ciclo.

Q: Come metto in pausa un'animazione CSS?

Imposta animation-play-state: paused sull'elemento, per esempio in :hover o con una classe aggiunta da JavaScript. Riportandolo a running l'animazione riprende da dove si era fermata.

Q: Come disattivo le animazioni per chi preferisce meno movimento?

Racchiudi l'animazione in @media (prefers-reduced-motion: no-preference) { ... }, oppure rimuovila dentro @media (prefers-reduced-motion: reduce) { ... }. La query segue l'opzione di riduzione del movimento del sistema operativo dell'utente.

Un'animazione CSS in un solo esempio

Un'animazione ha due parti: @keyframes, che descrive i passaggi, e la proprietà animation, che li applica a un elemento con una durata. Questa scheda scorre e compare in dissolvenza quando la pagina si carica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Modifica il codice (o cambia la durata in 2s) e l'anteprima si ricarica, così puoi rivedere l'ingresso della scheda. Il blocco @media (prefers-reduced-motion: reduce) sostituisce i keyframe con una semplice dissolvenza solo per chi ha impostato il sistema per ridurre il movimento.

Sintassi di @keyframes

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

from equivale a 0% e to equivale a 100%.
Aggiungi tutti i passaggi in percentuale che ti servono. I passaggi con gli stessi stili possono stare sulla stessa riga: 0%, 100% { ... }.
Una proprietà assente dal primo o dall'ultimo keyframe viene animata a partire dal valore proprio dell'elemento, o fino a quel valore.
Il nome (pulse) è quello che passi ad animation-name. Distingue maiuscole e minuscole e non può essere una parola chiave come none.

Le proprietà di animation

Proprietà	Cosa imposta	Predefinito
`animation-name`	quale `@keyframes` eseguire	`none`
`animation-duration`	durata di un ciclo	`0s`
`animation-timing-function`	curva di velocità tra i keyframe	`ease`
`animation-delay`	attesa prima del primo ciclo (un valore negativo parte a metà strada)	`0s`
`animation-iteration-count`	numero di cicli, oppure `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	stili prima e dopo: `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` o `paused`	`running`

La forma abbreviata le accetta in quasi qualsiasi ordine. L'unica regola è che il primo valore di tempo è la durata e il secondo è il ritardo:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction e fill-mode dal vivo

Scegli una direzione, un fill mode e un numero di cicli, poi premi Play. Il riquadro si sposta di 200px fino alla fine del binario. Il riquadro di lettura dice dove si è fermato dopo la fine dell'animazione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

Cosa osservare:

fill-mode: none (il valore predefinito): dopo l'ultimo fotogramma il riquadro torna di colpo a x = 0 e ridiventa ambra.
forwards: resta sull'ultimo keyframe. Con normal è x = 200 e verde; con reverse finisce a x = 0 e blu, perché l'ultimo keyframe riprodotto è stato from.
alternate con 2 cicli va e torna, quindi anche forwards finisce a x = 0.

Cicli infiniti: un indicatore di caricamento

infinite ripete all'infinito, e animation-delay su ogni figlio li sfasa in modo che si muovano a turno. Tieni i cicli tranquilli: lenti, piccoli, senza lampeggiamenti.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" con un aria-label dice a chi usa uno screen reader che qualcosa si sta caricando, cosa che i puntini da soli non comunicano. Per un cerchio che gira, vedi la pagina su rotate.

Mettere in pausa e controllare le animazioni

animation-play-state: paused blocca un'animazione dove si trova, e running la fa ripartire da lì. Passa il mouse sulla barra qui sotto per metterla in pausa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

Da JavaScript, element.getAnimations() restituisce le animazioni CSS in corso, ognuna con pause(), play(), cancel() e un currentTime che puoi leggere o impostare. L'evento animationend scatta quando un'animazione non infinita finisce, e animationiteration alla fine di ogni ciclo.

Rispetta il movimento ridotto e non far mai lampeggiare

Due regole di accessibilità valgono per ogni animazione:

Movimento ridotto. Le persone possono chiedere al sistema meno movimento perché il movimento le fa stare male. Lo schema più sicuro è aggiungere il movimento solo quando non ne hanno chiesto meno:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

Niente lampeggiamenti. Un contenuto che lampeggia più di tre volte in un secondo può scatenare crisi epilettiche. Evita del tutto i lampeggiamenti veloci e ad alto contrasto.

Animazioni fluide

Anima transform e opacity quando puoi. Il browser può applicarle senza ricalcolare il layout della pagina, quindi restano fluide anche sui telefoni lenti. Animare width, height, top, left o margin ricalcola il layout a ogni fotogramma. Per spostare un elemento, usa translate() della pagina su transform.

Errori comuni

Nessuna durata. animation: fade; non fa nulla, perché la durata predefinita è 0s.
Un nome che non corrisponde. animation-name deve corrispondere esattamente al nome di @keyframes, maiuscole e minuscole comprese.
Ritorno di colpo alla fine. Aggiungi forwards (o both) per mantenere l'ultimo keyframe.
Sfarfallio prima che parta un'animazione ritardata. Durante animation-delay l'elemento mostra i suoi stili normali. backwards (o both) applica il primo keyframe durante il ritardo.
Riavviare un'animazione impostando lo stesso valore. Impostare di nuovo la stessa animation non fa nulla. Rimuovila, forza un reflow (el.offsetWidth) e impostala di nuovo, come fa il pulsante Play qui sopra.
Animare display. Cambia all'istante. Anima invece opacity e transform.

Domande frequenti

Come si crea un'animazione in CSS?

Definisci i passaggi con @keyframes name { from { ... } to { ... } }, poi applicala a un elemento con la proprietà animation e una durata: animation: name 1s ease-out;. La durata è obbligatoria, perché il suo valore predefinito è 0s.

Cosa fa animation-fill-mode: forwards?

Mantiene gli stili dell'ultimo keyframe quando l'animazione finisce. Senza, l'elemento torna di colpo ai suoi stili normali. backwards applica il primo keyframe durante il ritardo, e both fa entrambe le cose.

Come faccio a ripetere un'animazione CSS all'infinito?

Imposta animation-iteration-count: infinite, oppure aggiungi infinite alla forma abbreviata: animation: spin 1s linear infinite;. Aggiungi alternate per riprodurla in avanti e poi all'indietro a ogni ciclo.

Che differenza c'è tra animation e transition in CSS?

Una transizione anima una proprietà tra due valori quando cambia, di solito all'hover o con un cambio di classe. Un'animazione parte da sola appena viene applicata, può avere quanti keyframe vuoi e può ripetersi, invertirsi e mettersi in pausa.

Come metto in pausa un'animazione CSS?

Imposta animation-play-state: paused sull'elemento, per esempio in :hover o con una classe aggiunta da JavaScript. Riportandolo a running l'animazione riprende da dove si era fermata.

Come disattivo le animazioni per chi preferisce meno movimento?

Racchiudi l'animazione in @media (prefers-reduced-motion: no-preference) { ... }, oppure rimuovila dentro @media (prefers-reduced-motion: reduce) { ... }. La query segue l'opzione di riduzione del movimento del sistema operativo dell'utente.

Concetti correlati