CSS easing visualizer

Editor cubic-bezier

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

Il CSS Easing Visualizer ti aiuta a creare, testare e rifinire funzioni di timing cubic-bezier() per transizioni CSS. Modifica i quattro punti di controllo, imposta la durata e verifica subito il comportamento con un'anteprima animata.

P1 (x1, y1)

P2 (x2, y2)

curva

x1 y1 x2 y2

Anteprima animata

Durata (ms) 0.8s

Preset rapidi

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.