CSS easing visualizer

Editor cubic-bezier

cubic-bezier(0.25, 0.1, 0.25, 1)

Trascina i punti di controllo della curva di Bézier e vedi l'animazione in tempo reale. Libreria di 30+ preset, confronto affiancato e output CSS per transition-timing-function.

P1 (x1, y1)
P2 (x2, y2)
curva
Anteprima animata
Durata (ms) 0.8s
Preset rapidi

Le curve di easing definiscono il ritmo di un'animazione CSS: la differenza tra un'interfaccia che sembra meccanica e una che sembra fluida e naturale sta quasi sempre nella scelta della timing function. Conoscere la differenza tra ease-in, ease-out, ease-in-out e una cubic-bezier personalizzata è fondamentale per qualsiasi front-end developer.

Questo visualizzatore permette di:

  • Disegnare curve cubic-bezier personalizzate trascinando i punti di controllo
  • Vedere l'animazione risultante applicata a un oggetto di esempio in tempo reale
  • Confrontare affiancate più curve per scegliere il timing ottimale
  • Navigare una libreria di 30+ preset categorizzati (ease, bounce, elastic, back, expo)
  • Copiare il valore cubic-bezier() per CSS transition e @keyframes animation
  • Visualizzare la corrispondenza con le steps() per animazioni frame-by-frame

Come leggere una curva cubic-bezier

  • I valori x1 e x2 devono stare tra 0 e 1 per una progressione temporale valida.
  • I valori y1 e y2 possono uscire da 0-1 per ottenere overshoot o effetti piu marcati.
  • Confronta piu preset per trovare la sensazione giusta in base al componente UI.

Usa questo visualizzatore per micro-interazioni, hover, aperture di pannelli e transizioni di stato mantenendo coerenza nel motion design.