Guida CSS interattiva: Transition

Q: In che ordine vanno i valori nella forma abbreviata di transition?

transition: property duration timing-function delay;, per esempio transition: opacity 0.3s ease-in 0.1s;. L'unica regola rigida è che il primo valore di tempo è la durata e il secondo il ritardo. Separa più transizioni con virgole.

Q: Perché la mia transition CSS non funziona?

Cause comuni: la transition è solo nella regola :hover (quindi l'animazione funziona all'entrata e torna indietro di scatto), la proprietà non si può animare (display, o height verso auto), la durata non ha unità (0.3 invece di 0.3s), oppure il valore cambia nello stesso momento in cui l'elemento viene aggiunto alla pagina.

Q: Si può fare una transition di height: auto?

Non con una semplice transition di height in tutti i browser: interpolare verso auto richiede la proprietà più recente interpolate-size, che non è ancora supportata ovunque. Le soluzioni comuni sono animare grid-template-rows da 0fr a 1fr su un contenitore grid, oppure animare max-height fino a un valore più grande del contenuto.

Una transition in un esempio

Una transition dice al browser: quando questa proprietà cambia, animala per questo tempo invece di cambiarla di colpo. Mettila nella regola normale dell'elemento, non solo in :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Passa sopra il primo pulsante: il colore sfuma verso il verde e il pulsante sale di 4px in 0,4 secondi, e quando sposti il puntatore la stessa transizione si riproduce al contrario. Il secondo pulsante ha transition: none e cambia all'istante. Chi usa la tastiera ottiene lo stesso effetto tramite :focus-visible.

La forma abbreviata di transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Proprietà estesa	Cosa imposta	Predefinito
`transition-property`	quali proprietà si animano (`all`, o un elenco)	`all`
`transition-duration`	quanto dura, in `s` o `ms`	`0s`
`transition-timing-function`	la curva di velocità	`ease`
`transition-delay`	l'attesa prima di iniziare (può essere negativa)	`0s`

La durata predefinita è 0s, ed è per questo che niente si anima finché non ne imposti una. Nella forma abbreviata, il primo tempo è sempre la durata e il secondo il ritardo. Per impostazioni diverse per ogni proprietà, separale con virgole:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Funzioni di timing fianco a fianco

La funzione di timing decide come cambia la velocità durante la transizione. Premi Play e tutte e sette le barre percorrono la stessa distanza negli stessi 1,5 secondi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Funzione di timing	Sensazione
`linear`	velocità costante, meccanica
`ease` (predefinita)	partenza rapida, arresto dolce
`ease-in`	partenza lenta, fine veloce: adatta a ciò che esce
`ease-out`	partenza veloce, fine lenta: adatta a ciò che arriva
`ease-in-out`	lenta a entrambe le estremità
`cubic-bezier(x1, y1, x2, y2)`	la tua curva; una y sopra 1 va oltre e poi torna indietro
`steps(n)`	salta in n passi uguali, senza fotogrammi intermedi

Per effetti hover e menu, ease-out con una durata tra 150ms e 300ms dà una sensazione reattiva.

Cosa si può animare

Si possono animare le proprietà che hanno valori intermedi: colori, lunghezze (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Le proprietà che saltano tra parole chiave, come display o font-family, cambiano di colpo.

height: auto è il caso in cui si inciampa di più: un pannello che si apre da height: 0 a height: auto per impostazione predefinita non si anima, perché il browser non calcola i valori tra 0 e "auto". Una soluzione affidabile è un contenitore grid la cui unica riga va da 0fr a 1fr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded dice a chi usa uno screen reader se il pannello è aperto, cosa che l'animazione da sola non fa.

Eseguire codice quando una transition finisce

L'evento transitionend scatta quando una transizione finisce, una volta per ogni proprietà. Usalo per fare qualcosa dopo il movimento, come spostare il focus o rimuovere un elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Rispetta il movimento ridotto

Alcune persone attivano "riduci movimento" nelle impostazioni di sistema perché il movimento sullo schermo dà loro le vertigini o le distrae. Mantieni le dissolvenze di colore e opacità, ed elimina i movimenti ampi, con una media query:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Mantieni le transition fluide

transform e opacity sono le proprietà più leggere da animare: il browser può spostare e sfumare un elemento senza ricalcolare il layout. Animare width, height, top o margin costringe il browser a reimpaginare la pagina a ogni fotogramma, e sui telefoni lenti può scattare. Per spostare qualcosa, preferisci transform: translate() a left o margin. La pagina su transform tratta le funzioni.

Errori comuni

transition solo nella regola :hover. L'effetto si anima all'entrata ma torna indietro di scatto quando finisce l'hover. Metti transition nella regola di base.
Una durata senza unità. transition: opacity 300 non è valido. Scrivi 300ms o 0.3s.
transition: all. Anima ogni proprietà che cambia, comprese quelle che non volevi animare, e può rendere lenti i cambiamenti di layout. Elenca le proprietà.
Aspettarsi che display: none sfumi. display cambia di colpo. Sfuma invece opacity (e imposta visibility: hidden quando la dissolvenza finisce).
Transition verso height: auto. Salta di colpo. Usa la tecnica con grid-template-rows vista sopra.
Durate lunghe per piccole interazioni. Oltre circa 400ms su un pulsante o un menu, tutto sembra lento.

Domande frequenti

Come funzionano le transition CSS?

Dichiari su un elemento quali proprietà devono animarsi e per quanto tempo, per esempio transition: background-color 0.3s ease;. Quando il valore di quella proprietà cambia (con :hover, una classe o JavaScript), il browser anima dal vecchio valore al nuovo invece di cambiare di colpo.

In che ordine vanno i valori nella forma abbreviata di transition?

transition: property duration timing-function delay;, per esempio transition: opacity 0.3s ease-in 0.1s;. L'unica regola rigida è che il primo valore di tempo è la durata e il secondo il ritardo. Separa più transizioni con virgole.

Perché la mia transition CSS non funziona?

Cause comuni: la transition è solo nella regola :hover (quindi l'animazione funziona all'entrata e torna indietro di scatto), la proprietà non si può animare (display, o height verso auto), la durata non ha unità (0.3 invece di 0.3s), oppure il valore cambia nello stesso momento in cui l'elemento viene aggiunto alla pagina.

Si può fare una transition di height: auto?

Non con una semplice transition di height in tutti i browser: interpolare verso auto richiede la proprietà più recente interpolate-size, che non è ancora supportata ovunque. Le soluzioni comuni sono animare grid-template-rows da 0fr a 1fr su un contenitore grid, oppure animare max-height fino a un valore più grande del contenuto.

Qual è la differenza tra transition e animation in CSS?

Una transition si esegue una volta, tra due valori, quando una proprietà cambia. Un'animation usa @keyframes, può avere molti passaggi, parte da sola quando la pagina si carica e può ripetersi o andare in loop.

Concetti correlati