Générateur de courbes d'accélération cubic-bezier
Créez des courbes d'accélération cubic-bezier pour CSS. Inclut des préréglages standard.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Comment utiliser cet outil
- 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.
Qu'est-ce que le générateur de courbes cubic-bezier ?
Les animations CSS utilisent des fonctions d'accélération (easing) pour contrôler la manière dont les valeurs évoluent dans le temps. Les quatre paramètres de cubic-bezier définissent une courbe de (0,0) à (1,1) : plus la courbe est pentue, plus l'animation est rapide dans cette région. Les préréglages courants couvrent la plupart des besoins ; les courbes personnalisées créent un mouvement distinctif.
Cas d'usage courants
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.
Questions fréquentes
Quelle est la différence entre ease et ease-in ?▼
Quand dois-je utiliser des courbes personnalisées ?▼
Outils connexes
Convertisseur de couleur (HEX/RGB/HSL)
Convertissez des couleurs entre les formats HEX, RGB et HSL. Choisissez une couleur visuellement ou saisissez les valeurs manuellement.
Générateur de box-shadow CSS
Créez visuellement des valeurs de box-shadow en CSS. Prévisualisez en temps réel et copiez le CSS généré.
Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux. Choisissez les couleurs visuellement et copiez le CSS généré.
Générateur de palettes de couleurs
Générez des palettes de couleurs harmonieuses à partir de n'importe quelle couleur de base. Prend en charge les schémas complémentaires, analogues, triadiques et monochromatiques.
Générateur de border-radius CSS
Créez visuellement des valeurs complexes de border-radius en CSS. Contrôle indépendant de chaque coin.
Générateur de CSS clamp()
Générez des valeurs CSS fluides et responsives avec clamp(). Mise à l'échelle progressive entre des tailles minimale et maximale sur les plages de viewport.