Générateur de Cubic Bezier CSS

Fonctionnement des courbes d'accélération CSS

Le Générateur de Cubic Bezier CSS permet de concevoir visuellement une courbe d'accélération (easing) en ajustant deux points de contrôle. La courbe tracée s'étend du coin inférieur gauche, qui représente le début de l'animation, jusqu'au coin supérieur droit, qui en marque la fin. Sur ce graphique, l'axe horizontal représente la progression du temps (qui s'écoule de gauche à droite), tandis que l'axe vertical correspond à la progression de l'animation (qui monte vers le haut).

Pendant que vous modifiez la courbe, un point se déplace le long de celle-ci afin de démontrer l'effet d'accélération ou de décélération obtenu. Ce mouvement est affiché juste à côté d'un second point qui progresse à un rythme constant (linéaire), offrant ainsi un point de comparaison direct. Une fois la courbe ajustée, l'outil génère la valeur cubic-bezier() correspondante, prête à être copiée pour vos feuilles de style CSS.

Paramètres d'entrée et contrôle des poignées

La forme de la courbe est déterminée par deux points de contrôle, chacun possédant des coordonnées X et Y:

• Premier point de contrôle X (x1): Une valeur numérique obligatoirement comprise entre 0 et 1.
• Premier point de contrôle Y (y1): Une valeur numérique comprise entre -0,70 et 1,70.
• Deuxième point de contrôle X (x2): Une valeur numérique obligatoirement comprise entre 0 et 1.
• Deuxième point de contrôle Y (y2): Une valeur numérique comprise entre -0,70 et 1,70.

Vous pouvez modifier ces paramètres de trois manières différentes:

1. Glissement des poignées: Ajustez directement les deux poignées sur l'interface pour déformer la courbe visuellement.
2. Changement au clavier: Lorsqu'une poignée de contrôle est sélectionnée, vous pouvez appuyer sur la touche Flèche gauche pour modifier sa valeur, par exemple pour la régler à 0.99.
3. Sélection de préréglages: Choisissez parmi des options prédéfinies telles que « ease », « ease-in », « ease-out », « ease-in-out », « Retour à l'entrée », « Retour à la sortie » ou « Retour entrée-sortie ». Par exemple, le préréglage « Retour à la sortie » applique la valeur cubic-bezier(0.34, 1.56, 0.64, 1).

Règles de validation des champs de saisie

L'interface applique des règles strictes pour garantir la validité du code CSS généré:

• Les valeurs de X sont limitées à l'intervalle 0–1, tandis que les valeurs de Y sont limitées à l'intervalle -0,70–1,70.
• Si vous saisissez une valeur hors limites, comme 9 pour le premier point de contrôle X, et que le champ perd le focus, la valeur est automatiquement corrigée et devient 1.
• Si vous effacez complètement un champ numérique et que celui-ci perd le focus, l'outil restaure la valeur valide précédente.
• Les saisies vides ou non numériques suspendent la mise à jour en attendant qu'une valeur complète soit entrée.

Données de sortie et intégration CSS

L'outil affiche en temps réel les éléments suivants:

• votre courbe: La représentation visuelle de la courbe d'accélération personnalisée.
• cubic-bezier(x1, y1, x2, y2): La fonction CSS exacte calculée à partir de la position des points de contrôle.
• Copié: Un indicateur d'état qui s'affiche brièvement après avoir copié avec succès la valeur cubic-bezier(). Le processus de copie ne présente qu'un état de réussite, sans message d'erreur ou de rejet.

Cette valeur s'intègre dans vos feuilles de style à l'aide des propriétés transition-timing-function ou animation-timing-function.

/* Exemple d'application sur une transition */
.bouton {
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Effets avancés et limites mathématiques

Les valeurs de Y ne sont pas limitées à l'intervalle standard de 0 à 1; elles peuvent descendre jusqu'à -0,70 ou monter jusqu'à 1,70. Cette flexibilité permet de concevoir des effets d'anticipation (le mouvement recule légèrement sous son point de départ avant de s'élancer) ou de dépassement (l'élément dépasse sa cible finale avant de revenir se stabiliser à sa position finale).

Cependant, une seule fonction cubic-bezier() possède des limites structurelles. Elle peut anticiper et dépasser, mais elle ne peut effectuer qu'un seul changement de direction avant de se stabiliser. Il est donc impossible d'utiliser une seule courbe cubic-bezier() pour créer des effets complexes de rebondissements multiples ou des oscillations élastiques successives, car ces comportements exigent des inversions de direction répétées.

Confidentialité et traitement des données

La courbe est tracée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo. Le traitement s'effectue localement sur votre machine.

---

Foire aux questions (FAQ)

Que signifient les deux poignées et les quatre nombres? La courbe s'étend du coin inférieur gauche (le début) au coin supérieur droit (la fin), l'axe horizontal représentant le temps et l'axe vertical représentant la progression. Les deux poignées sont les points de contrôle qui courbent la trajectoire — chacune possède des coordonnées X et Y, formant ensemble l'expression cubic-bezier(x1, y1, x2, y2). La valeur de X reste obligatoirement comprise entre 0 et 1, tandis que Y peut dépasser les limites supérieure ou inférieure pour créer un effet de dépassement ou de recul avant stabilisation.

Comment utiliser cette valeur dans mon code CSS? Copiez la valeur cubic-bezier() et intégrez-la partout où une fonction de progression temporelle est acceptée — comme transition-timing-function, animation-timing-function, ou dans une propriété raccourcie, par exemple: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Les mots-clés ease, ease-in, ease-out et ease-in-out correspondent simplement à des courbes cubic-bezier prédéfinies; sélectionner l'un de ces préréglages vous affichera la valeur exacte associée.

Est-il possible de créer un effet de rebond ou élastique? Pas de façon autonome. Une seule courbe cubic-bezier peut anticiper et dépasser sa cible — les préréglages de type « back » étirent une poignée au-delà des limites de la boîte pour accomplir précisément cela — mais elle ne peut effectuer qu'un seul mouvement d'aller-retour avant de se stabiliser. Les effets de rebond ou élastiques nécessitent plusieurs changements de direction successifs, ce qu'une seule courbe cubic-bezier ne peut pas exprimer; pour ces animations, vous devrez utiliser des keyframes CSS ou la fonction linear() avec plusieurs points d'arrêt.