Qual è l'easing CSS predefinito?

Transizioni e animazioni usano ease per impostazione predefinita, che equivale a cubic-bezier(0.25, 0.1, 0.25, 1): una partenza rapida e un arrivo morbido.

Come creo un effetto di overshoot o di rimbalzo?

Trascina una maniglia sopra 1 o sotto 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), supera la fine e poi torna indietro. Una singola curva di Bézier cubica non può rimbalzare più volte; per questo usa i keyframe o la funzione linear().

Posso usare lo stesso valore per le animazioni?

Sì. Il valore funziona in transition-timing-function, animation-timing-function e nell'opzione easing della Web Animations API.

Generatore di curve di Bézier

Modella le curve di easing CSS trascinando due maniglie. Confronta il movimento con un andamento lineare e copia cubic-bezier() per le transizioni o Tailwind.

Editor della curva

Trascina una delle due maniglie. La linea tratteggiata è l'andamento lineare.

Anteprima del movimento

La tua curva

Lineare

Posizione a ogni decimo della durata

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Tutto rimane nel tuo browser.

Riferimenti

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Pagina aggiornata: 2026-10-25

Editor della curva

Anteprima del movimento

Guida ed esempio

Strumenti correlati

Riferimenti