Transizioni CSS: transition, easing, delay

Finora, quando abbiamo applicato uno stato :hover a un elemento (come un bottone che cambia colore di sfondo quando il mouse ci passa sopra), il cambiamento è stato istantaneo. Da blu scattava a rosso in 0 millisecondi.

Nel mondo reale, le cose non si teletrasportano e non cambiano colore all’istante. Hanno un’inerzia. Le Transizioni CSS ci permettono di dire al browser: “Invece di applicare questo nuovo stile all’istante, impiegaci X secondi per passare dal vecchio al nuovo”.

La proprietà transition

La proprietà transition si applica all’elemento nello stato normale, non nello stato :hover!

È una proprietà “abbreviata” (shorthand) che accetta 3 o 4 valori:

1. Property: Quale regola CSS vogliamo animare? (es. background-color, o all per animarle tutte).
2. Duration: Quanto deve durare l’animazione? (es. 0.3s per 300 millisecondi).
3. Timing function (Easing): L’accelerazione dell’animazione (es. ease, linear, ease-in-out).
4. Delay: (Opzionale) Quanto aspettare prima di iniziare l’animazione?

.bottone {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  
  transition:
    background-color 0.3s ease-out,
    transform 0.3s ease-out;
}

.bottone:hover {
  background-color: darkblue; /* Il browser animerà gradualmente verso il darkblue! */
  transform: translateY(-5px); /* Il browser animerà gradualmente lo spostamento in alto! */
}

Cos’è il Timing Function (Easing)?

Se un’animazione è lineare (linear), viaggia a velocità costante dall’inizio alla fine. Sembra robotica e innaturale. Gli easing aggiungono fisica e realismo:

• ease (default): Inizia veloce, rallenta nel mezzo, decelera dolcemente alla fine.
• ease-in: Inizia lentissimo e accelera fino alla fine (ideale per cose che escono dallo schermo o cadono).
• ease-out: Inizia veloce e frena dolcemente alla fine (ideale per elementi che compaiono o entrano nello schermo).
• ease-in-out: Accelera a metà e frena alla fine.

Se vuoi essere un vero professionista, puoi creare le tue curve di accelerazione personalizzate usando la funzione matematica cubic-bezier().

Attenzione alle Performance!

Puoi animare quasi tutto con transition, ma i browser faticano tantissimo a calcolare l’animazione di alcune proprietà.

Evita di animare spesso queste proprietà, soprattutto su elementi grandi:

• width e height
• margin e padding
• top, left, right, bottom

Anima liberamente e senza preoccupazioni queste proprietà (sono accelerate dalla scheda video GPU del dispositivo):

• transform (per spostare, ruotare o ingrandire scale)
• opacity (per far svanire)
• background-color e color, con moderazione

Rispetto delle preferenze di movimento

Alcune persone riducono le animazioni dal sistema operativo. Puoi rispettare questa preferenza con prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  .bottone {
    transition: none;
  }
}

Non significa eliminare ogni feedback visivo: significa evitare movimento non necessario.