Generatore di curve di accelerazione cubic-bezier
Crea curve di accelerazione cubic-bezier per il CSS. Include preset standard.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Come usare questo strumento
- 1
Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.
- 2
Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.
- 3
Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.
- 4
Copy that declaration by hand and drop it into your CSS transition or animation rule.
Che cos'è il generatore di curve cubic-bezier?
Le animazioni CSS utilizzano funzioni di accelerazione (easing) per controllare come i valori cambiano nel tempo. I quattro parametri di cubic-bezier definiscono una curva da (0,0) a (1,1): più la curva è ripida, più veloce è l'animazione in quella regione. I preset comuni coprono la maggior parte delle esigenze; le curve personalizzate creano un movimento distintivo.
Casi d'uso comuni
Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.
Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.
Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.
Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.
Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.
Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.
Domande frequenti
Qual è la differenza tra ease e ease-in?▼
Quando devo usare le curve personalizzate?▼
Strumenti correlati
Convertitore di colori (HEX/RGB/HSL)
Converte i colori tra i formati HEX, RGB e HSL. Scelga un colore visivamente o inserisca i valori manualmente.
Generatore di box shadow CSS
Crea valori di box-shadow in CSS in modo visivo. Anteprima in tempo reale e copia del CSS generato.
Generatore di gradienti CSS
Crea gradienti CSS lineari e radiali. Scelga i colori in modo visivo e copi il CSS generato.
Generatore di palette di colori
Genera palette di colori armoniose a partire da qualsiasi colore di base. Supporta schemi complementari, analoghi, triadici e monocromatici.
Generatore di border radius CSS
Crea valori complessi di border-radius in CSS in modo visivo. Controllo indipendente di ciascun angolo.
Generatore di CSS clamp()
Genera valori CSS fluidi e responsivi con clamp(). Scala in modo uniforme tra dimensioni minime e massime lungo gli intervalli del viewport.