Courbe cubic-bezier
Créez une courbe d’animation CSS en déplaçant les poignées, avec aperçu animé.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Dessinez votre courbe d’animation
Déplacez les deux poignées sur le graphe pour façonner l’accélération, regardez la bille animée reproduire le mouvement, puis copiez la valeur cubic-bezier() pour votre CSS.
-
Partez d’un préréglage
ease, ease-in-out, linear…
-
Ajustez les poignées
X = temps (0–1), Y libre pour le rebond.
-
Copiez le CSS
Collez dans transition ou animation.
Les préréglages CSS
| Nom | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
Les X sont bornés à [0,1], les Y peuvent dépasser pour les rebonds. Aperçu via l’API Web Animations, tout reste local.
Questions fréquentes
Qu’est-ce qu’une courbe cubic-bezier ?
C’est la fonction de timing qui décrit comment une animation accélère et ralentit. Elle est définie par deux points de contrôle (x1, y1, x2, y2). En CSS : transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Pourquoi les valeurs Y peuvent-elles dépasser 1 ?
Les X restent entre 0 et 1 (le temps), mais les Y peuvent sortir de [0,1] pour créer un effet de rebond ou de dépassement (l’élément va plus loin puis revient). C’est ainsi qu’on obtient les courbes « back » et élastiques.
Comment l’utiliser dans mon CSS ?
Collez la valeur dans transition: all 0.3s cubic-bezier(…) ou dans animation-timing-function. L’aperçu animé vous montre le rendu réel avant de coller.
Quels sont les préréglages standard ?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Partez d’un préréglage puis ajustez les poignées.