# L’easing spiegato: perché un buon movimento sembra naturale

[Canonical HTML page](https://gradiently.design/it/guide/easing)

Lo stesso movimento può sembrare goffo o senza sforzo a seconda di una sola impostazione. Quell’impostazione è l’easing, e poche regole semplici coprono quasi ogni caso.

## The short version

- L’easing descrive come cambia la velocità di un movimento nel corso della sua durata, invece di restare costante dall’inizio alla fine.
- L’ease-out parte veloce e rallenta, e va bene per ciò che entra; l’ease-in parte piano e accelera, e va bene per ciò che esce.
- Il movimento lineare, a velocità costante, sembra meccanico nei singoli spostamenti ma è giusto per loop continui e rotazioni.
- Una curva cubic-bezier definisce qualsiasi easing con due punti di controllo, e valori fuori dall’intervallo da 0 a 1 creano un superamento del bersaglio.
- Le molle descrivono il movimento con impostazioni fisiche come rigidità e smorzamento, e il CSS può approssimarle con la funzione linear().

L’**easing** è il modo in cui cambia la velocità di un movimento mentre si svolge. Senza easing, un oggetto si muove a velocità costante e si ferma di colpo, e sembra meccanico. Con l’easing accelera e rallenta come fanno le cose vere: un cassetto scivola fuori veloce e si assesta, una palla prende velocità mentre cade. Scegliere l’easing giusto è il modo più rapido per far sembrare naturale qualsiasi animazione.

## Che aspetto ha l’easing

Chi anima disegna l’easing come una tabella di spaziatura: dove si trova un oggetto a intervalli di tempo uguali. Quando i segni sono equidistanti, la velocità è costante. Quando si ammassano, l’oggetto si muove piano; quando si allargano, si muove veloce. Ecco i quattro easing di base, ciascuno con undici momenti uguali dello stesso movimento da sinistra a destra.

- Lineare: spaziatura uniforme: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 9.4%, #f9a8d4 9.4% 10.6%, #1e1b4b 10.6% 19.4%, #f9a8d4 19.4% 20.6%, #1e1b4b 20.6% 29.4%, #f9a8d4 29.4% 30.6%, #1e1b4b 30.6% 39.4%, #f9a8d4 39.4% 40.6%, #1e1b4b 40.6% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 59.4%, #f9a8d4 59.4% 60.6%, #1e1b4b 60.6% 69.4%, #f9a8d4 69.4% 70.6%, #1e1b4b 70.6% 79.4%, #f9a8d4 79.4% 80.6%, #1e1b4b 80.6% 89.4%, #f9a8d4 89.4% 90.6%, #1e1b4b 90.6% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-in: inizio lento, fine veloce: `linear-gradient(90deg, #f9a8d4 0% 2.3%, #1e1b4b 2.3% 5.6%, #f9a8d4 5.6% 6.8%, #1e1b4b 6.8% 12.4%, #f9a8d4 12.4% 13.6%, #1e1b4b 13.6% 20.9%, #f9a8d4 20.9% 22.1%, #1e1b4b 22.1% 30.9%, #f9a8d4 30.9% 32.1%, #1e1b4b 32.1% 42.3%, #f9a8d4 42.3% 43.5%, #1e1b4b 43.5% 54.9%, #f9a8d4 54.9% 56.1%, #1e1b4b 56.1% 68.6%, #f9a8d4 68.6% 69.8%, #1e1b4b 69.8% 83.3%, #f9a8d4 83.3% 84.5%, #1e1b4b 84.5% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-out: inizio veloce, arresto dolce: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 15.5%, #f9a8d4 15.5% 16.7%, #1e1b4b 16.7% 30.2%, #f9a8d4 30.2% 31.4%, #1e1b4b 31.4% 43.9%, #f9a8d4 43.9% 45.1%, #1e1b4b 45.1% 56.5%, #f9a8d4 56.5% 57.7%, #1e1b4b 57.7% 67.9%, #f9a8d4 67.9% 69.1%, #1e1b4b 69.1% 77.9%, #f9a8d4 77.9% 79.1%, #1e1b4b 79.1% 86.4%, #f9a8d4 86.4% 87.6%, #1e1b4b 87.6% 93.2%, #f9a8d4 93.2% 94.4%, #1e1b4b 94.4% 97.7%, #f9a8d4 97.7% 100%)`
- Ease-in-out: dolce a entrambi i capi: `linear-gradient(90deg, #f9a8d4 0% 2.6%, #1e1b4b 2.6% 7.6%, #f9a8d4 7.6% 8.8%, #1e1b4b 8.8% 18.1%, #f9a8d4 18.1% 19.3%, #1e1b4b 19.3% 32.6%, #f9a8d4 32.6% 33.8%, #1e1b4b 33.8% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 66.2%, #f9a8d4 66.2% 67.4%, #1e1b4b 67.4% 80.7%, #f9a8d4 80.7% 81.9%, #1e1b4b 81.9% 91.2%, #f9a8d4 91.2% 92.4%, #1e1b4b 92.4% 97.4%, #f9a8d4 97.4% 100%)`

Tabelle di spaziatura calcolate dalle curve CSS. Ogni linea rosa è la posizione dell’oggetto in uno di undici momenti uguali. Linee ammassate significano lento, linee larghe significano veloce.

## I quattro easing che servono davvero

Il CSS dà un nome a cinque curve di base, e gli strumenti di design usano le stesse idee con nomi simili. Quattro coprono quasi ogni lavoro. La quinta, `ease`, è quella predefinita del browser: una curva che parte abbastanza veloce e si assesta dolcemente, un po’ come un ease-out più morbido.

| Easing | Curva CSS | Da usare per |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Ciò che entra o appare: menu, card, titoli |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Ciò che esce o scompare |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Ciò che si sposta da un punto a un altro dello schermo |
| Lineare | `cubic-bezier(0, 0, 1, 1)` | Loop continui, rotazioni, barre di avanzamento, deriva dello sfondo |

I valori con parola chiave del CSS. Molti team usano curve personalizzate un po’ più decise, ma i ruoli restano gli stessi.

La logica è fisica. Qualcosa che arriva dovrebbe già essere in movimento quando appare, poi assestarsi, quindi fa ease-out. Qualcosa che se ne va dovrebbe prendere velocità mentre esce, quindi fa ease-in. Il lineare è sbagliato per un singolo spostamento, ma giusto per tutto ciò che è continuo: un loop con easing ai capi sembra esitare a ogni ripetizione, come spiegano i [loop senza stacchi](https://gradiently.design/it/guide/seamless-loop-video).

## Come funzionano le curve cubic-bezier

Ogni curva di easing del CSS è disegnata tra due punti fissi, l’inizio (0, 0) e la fine (1, 1). Una `cubic-bezier()` aggiunge due punti di controllo che piegano la curva. L’asse orizzontale è il tempo e quello verticale è l’avanzamento. I valori del tempo devono restare tra 0 e 1, ma quelli dell’avanzamento possono superarli, e questo fa sì che un movimento superi il bersaglio e poi torni indietro.

```css
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Exits: shorter and easing in */
.card-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}
```

Curve personalizzate in CSS. Riserva il superamento del bersaglio a momenti piccoli e giocosi; sui pannelli grandi sembra traballante.

Il riferimento di MDN alle [funzioni di easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) elenca tutte le forme accettate dal CSS, compresa `steps()` per il movimento fotogramma per fotogramma.

## Le molle: easing dalla fisica

Una molla non usa una curva e una durata fisse. Descrivi invece la fisica, di solito rigidità (con quanta forza tira verso il bersaglio), smorzamento (con quanta rapidità si calma) e massa, e il movimento ne segue. Le molle rigide e ben smorzate sembrano scattanti e precise; quelle lente e poco smorzate rimbalzano. Le molle sono popolari nelle interfacce delle app perché rispondono in modo naturale quando un movimento viene interrotto a metà.

Molte librerie di animazione offrono le molle direttamente. Nel CSS semplice, la funzione `linear()` può approssimarne una elencando punti lungo il suo percorso, ed è supportata dai browser moderni.

```css
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
  transition: transform 500ms
    linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}
```

`linear()` unisce i punti con segmenti dritti. Più punti danno una curva più liscia; i generatori possono calcolarli dalle impostazioni della molla.

## Easing e durata lavorano insieme

La stessa curva dà sensazioni diverse a durate diverse. Un ease-out di 150 millisecondi si legge come uno scatto netto; di 800 come uno scivolamento lento. Adatta entrambi alla distanza e al compito. I [principi del motion design](https://gradiently.design/it/guide/motion-design-principles) indicano le durate tipiche.

### Errori comuni

- Movimento lineare per un menu o una card che entra
- Ease-in su ciò che appare, che parte in modo fiacco
- Stessa lunga durata per movimenti piccoli e grandi
- Superamento elastico su tutto
- Easing ai capi di un loop continuo

### Meglio

- Ease-out per tutto ciò che arriva
- Ease-in, un po’ più breve, per tutto ciò che se ne va
- Breve per i movimenti piccoli, più lungo per quelli grandi
- Superamento riservato a momenti piccoli e giocosi
- Lineare per i loop, così non esitano mai

## L’easing in JavaScript, negli strumenti di design e nel video

Le stesse curve funzionano fuori dal CSS. In JavaScript, la Web Animations API accetta una stringa di easing CSS. Gli strumenti di design e video usano le stesse idee con nomi come ease in, ease out ed ease in and out, di solito con un editor a grafico per le curve personalizzate e, in molti strumenti di prototipazione, preset di molle.

```js
const card = document.querySelector('.card')

card.animate(
  [
    { transform: 'translateY(24px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 },
  ],
  { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)
```

Un’entrata con easing tramite la Web Animations API, con la stessa curva del CSS qui sopra.

Qualunque sia la curva, alcune persone preferiscono meno movimento. Rispetta la loro impostazione accorciando o eliminando il movimento; il [movimento ridotto](https://gradiently.design/it/guide/reduced-motion) mostra come. E per gli sfondi in loop, dove di solito il lineare è giusto, vedi gli [sfondi con gradiente animato](https://gradiently.design/it/guide/animated-gradient-background).

## FAQ

### Cos’è l’easing in un’animazione?

L’easing è il modo in cui cambia la velocità di un movimento nel corso della sua durata. Invece di muoversi a velocità costante, un movimento con easing accelera, rallenta o entrambe le cose, e sembra più naturale.

### Qual è la differenza tra ease-in ed ease-out?

L’ease-in parte piano e accelera, e va bene per ciò che esce. L’ease-out parte veloce e rallenta, e va bene per ciò che entra.

### Quando devo usare l’easing lineare?

Per il movimento continuo come loop, rotazioni, barre di avanzamento e lenta deriva dello sfondo. Per i singoli movimenti sembra meccanico.

### Cosa significa cubic-bezier in CSS?

Definisce una curva di easing con due punti di controllo tra l’inizio e la fine fissi. I valori del tempo restano tra 0 e 1, mentre quelli dell’avanzamento oltre questo intervallo creano il superamento del bersaglio.

### Cos’è l’animazione a molla?

Un movimento descritto da impostazioni fisiche come rigidità, smorzamento e massa invece che da una curva fissa. Il CSS può approssimare le molle con la funzione di easing linear().