Intermedio 9 min di lettura Luglio 2026

Curve di Easing e Timing

Come scegliere il timing giusto per ogni tipo di animazione. Le curve di easing spiegano le differenze tra velocità e fluidità.

Il timing è ciò che trasforma un movimento rigido in qualcosa che sembra naturale. Scopriamo insieme come funzionano le curve di easing e perché sono fondamentali nel design delle animazioni UI.

Schermo del computer che mostra transizioni di animazione e curve di easing in un software di design

Perché il Timing È Tutto

Quando guardi un’animazione, non stai solo vedendo il movimento. Stai vedendo il ritmo di quel movimento. Due animazioni possono andare dallo stesso punto A al punto B in un secondo, ma se cambiano il modo in cui accelerano o decelerano, creeranno sensazioni completamente diverse.

È la differenza tra un’animazione che sembra rigida e robotica e una che sembra fluida e naturale. Il timing non è solo un dettaglio tecnico — è quello che fa sembrare un’interfaccia viva e reattiva.

Curve di easing principali da imparare

100-500ms

Range ideale per la maggior parte delle transizioni UI

Principi di timing dell’animazione classica applicate a UI

Cosa Sono le Curve di Easing

Una curva di easing descrive come un valore cambia nel tempo. Invece di muoversi a velocità costante da inizio a fine, l’easing ti permette di controllare l’accelerazione e la decelerazione del movimento.

Immagina un’auto che accelera da ferma. Non passa da 0 a 100 km/h istantaneamente — accelera gradualmente. Questo è quello che fa l’easing per le tue animazioni. Quando cominci, il movimento è lento. Poi accelera. Poi rallenta di nuovo verso la fine.

Il grafico di una curva di easing mostra esattamente questo: come il progresso dell’animazione cambia nel tempo. Un grafico piatto significa movimento costante. Una curva che sale ripida significa accelerazione. Una curva che si appiattisce significa decelerazione.

Grafico che mostra tre curve di easing diverse: lineare, ease-in, e ease-out confrontate fianco a fianco

Designer che guarda il monitor mentre lavora su una timeline di animazione con curve di easing visualizzate

Le Curve Più Comuni e Quando Usarle

Ci sono otto curve di easing principali che vedrai in quasi tutti i tool di design e animation. Ognuna ha un carattere diverso.

Linear

Velocità costante dall’inizio alla fine. Usalo raramente — sembra robotico. Va bene solo per animazioni continue come loading spinner.

Ease-In

Inizia lentamente, poi accelera. Perfetto quando qualcosa esce dallo schermo o scompare. Ti dà l’impressione che stia guadagnando momentum.

Ease-Out

Inizia veloce, poi rallenta. Usalo quando qualcosa entra nello schermo o appare. Sembra naturale e controllato.

Ease-In-Out

Lento all’inizio, veloce nel mezzo, lento alla fine. Usalo per animazioni che iniziano e finiscono nello stesso spazio — molto versatile.

Il Timing Giusto per Ogni Interazione

Non esiste un timing perfetto universale — dipende da cosa stai animando. Ma ci sono linee guida che funzionano bene nella pratica.

Feedback immediato 100-150ms

Button hover, toggle switch, checkbox. Deve sembrare istantaneo.

Transizioni standard 200-300ms

Cambio di colore, slide menu, fade di elementi. Veloce ma visibile.

Animazioni più elaborate 400-600ms

Apertura modale, espansione di pannello, scroll animato. Ha più presenza.

Animazioni decorative 800ms – 1.5s

Caricamento, onboarding, hero section. Più lenta, più drammatica.

Cronometro digitale e timeline che mostra i range di timing raccomandati per diverse animazioni

Codice CSS con proprietà di animazione e curve di easing cubic-bezier scritto su uno schermo di un editor

Come Implementarle nel Codice

In CSS, usi la proprietà animation-timing-function o la forma abbreviata nella proprietà animation .

Le curve predefinite sono: ease , ease-in , ease-out , ease-in-out , linear . Ma puoi anche definire curve personalizzate usando cubic-bezier() .

Con cubic-bezier, tu controlli quattro valori che definiscono esattamente come la curva si piega. È più potente ma richiede un po’ di pratica. La buona notizia? Ci sono tool online che ti mostrano la curva in tempo reale mentre la regoli. Non devi fare conti complicati.

La chiave è sperimentare. Cambia il timing di una transizione e guarda come cambia la sensazione. Presto inizierai a sviluppare un intuito per cosa funziona e cosa no.

Scritto da

Animare Studio Team Editoriale

Team Editoriale

Scritto dal team editoriale di Animare Studio, focalizzato su guida pratica e verificata per l’animazione UI.

Ricorda: Il Timing Cambia Tutto

Le curve di easing non sono solo dettagli tecnici — sono il modo in cui comunichi il movimento ai tuoi utenti. Una curva giusta rende un’interfaccia fluida, naturale e piacevole da usare. Una curva sbagliata la rende strana e frustrante.

Non c’è scorciatoia qui. L’unico modo di sviluppare un senso per il timing è sperimentare. Prendi un’animazione semplice e provane diverse curve di easing. Guarda come cambia la sensazione. Dopo poche settimane di pratica, inizierai a scegliere il timing giusto istintivamente.

E ricorda: meno timing, meglio è. Non animare tutto solo perché puoi. Le animazioni migliori sono spesso quelle che l’utente non nota consapevolmente — quelle che semplicemente rendono l’interfaccia più piacevole e intuitiva da usare.

Nota Editoriale

Questo articolo è fornito a scopo informativo e educativo. Le tecniche, i valori di timing e gli esempi descritti riflettono le best practice correnti nel design dell’animazione UI. Le specifiche tecniche e gli standard del web si evolvono — ti consigliamo di consultare la documentazione ufficiale di CSS e WebAPI per le implementazioni più recenti. L’applicazione di queste curve dipende dal contesto specifico del tuo progetto e dalle esigenze dei tuoi utenti.