Generatore di cubic-bezier (easing CSS)
Disegna curve di animazione cubic-bezier trascinando i punti di controllo, confronta con ease, ease-in-out e altre curve pronte e copia il CSS della transizione.
Come si usaEditor di curve cubic-bezier
Disponibile in: 
Generatore di cubic-bezier (easing CSS): a cosa serve
Trascina i due punti di controllo nel grafico o scegli una curva pronta, come ease, molla e anticipazione. Regola la durata e confronta l’animazione della tua curva con una lineare prima di copiare il CSS per transition o animation.
Come si usa
- Scegli un modello o trascina i punti.
- Imposta la durata e prova l’animazione.
- Copia il CSS.
Quando usarlo
- Creare animazioni più naturali nelle interfacce.
- Regolare le transizioni di menu e modali.
- Studiare le funzioni di easing.
Domande frequenti
Che cos’è cubic-bezier?
È la funzione che definisce l’accelerazione di una transizione o animazione CSS. I quattro numeri sono le coordinate x e y di due punti di controllo; x va da 0 a 1 e y può superare questi limiti per creare un effetto molla.
Quale curva usare nelle interfacce?
Per gli elementi che entrano nello schermo, le curve che rallentano alla fine, come cubic-bezier(0.22, 1, 0.36, 1), sembrano più naturali. Per le uscite, preferisci curve che accelerano, come ease-in.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.