⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur de Bézier cubique

Concevez une fonction de synchronisation CSS cubique-bezier() personnalisée en faisant glisser deux points de contrôle, prévisualisez-la en direct par rapport à une référence linéaire, puis copiez la valeur prête.

Faites glisser la poignée orange (P1) et la poignée rouge (P2) pour remodeler la courbe – les touches fléchées fonctionnent également. X reste coincé entre 0 et 1 comme CSS l'exige ; faites glisser une poignée au-dessus ou en dessous de la boîte pour envoyer y au-delà de cette plage pour les effets de dépassement et de rebond.

Votre courbe

Linéaire (à titre de comparaison)

Traitement... 0%

Résultat

Taper cubique-bezier(x1, y1, x2, y2) à la main et recharger la page pour vérifier la sensation est une manière lente de régler une animation. Ce générateur ferme cette boucle : faites glisser la poignée du point de contrôle sur la courbe ou saisissez des nombres exacts dans les champs x1/y1/x2/y2, et la courbe, la chaîne CSS copiable et l'aperçu de l'animation en direct sont tous mis à jour à chaque modification - pas d'étape de construction, pas de rechargement.

Les deux axes fonctionnent volontairement différemment. x1 et x2 restent coincés entre 0 et 1, car c'est ce que la spécification CSS exige réellement d'une fonction de synchronisation cubique-bezier() : une valeur en dehors de cette plage est tout simplement invalide. y1 et y2 n'ont pas une telle limite : faites glisser une poignée au-dessus du haut de la boîte ou en dessous du bas, et la courbe dépasse son début ou sa fin, ce qui est exactement ainsi que les effets de ressort et de rebond sont construits à partir d'une seule courbe d'assouplissement.

Voir un nombre n'est pas la même chose que voir le mouvement, donc l'aperçu fait défiler deux balles identiques côte à côte sur une boucle : l'une se déplace en utilisant votre courbe personnalisée, l'autre se déplace à un rythme linéaire constant et simple. Les regarder courir est le moyen le plus rapide de savoir si une courbe d’assouplissement produit réellement la sensation souhaitée, avant même qu’elle n’atteigne une feuille de style. Les pages prédéfinies - les chiffres réels derrière le mot-clé de facilité d'entrée de CSS, une approximation de dépassement honnête que certains appellent un rebond et la courbe standard de conception matérielle publiée par Google - sont des points de départ prêts à partir desquels vous pouvez faire glisser plutôt que des points de contrôle vides.

Tout s'exécute localement dans votre navigateur : pas de téléchargement, pas de compte, pas d'aller-retour sur le serveur, et le générateur continue de fonctionner hors ligne une fois la page chargée.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Éditeur de courbe SVG déplaçable avec deux poignées (P1 et P2) et entrées numériques x1/y1/x2/y2 modifiables pour des valeurs précises au pixel près.
  • Aperçu de l'animation en boucle comparant votre timing cubique-bezier() personnalisé à une boule de référence linéaire, afin que vous puissiez voir l'assouplissement, pas seulement le lire.
  • Chaîne de bézier cubique (x1, y1, x2, y2) copiable prête pour la fonction de synchronisation de transition ou la fonction de synchronisation d'animation, ainsi que des pages prédéfinies pour la facilité d'entrée, le rebond et la courbe standard de Material Design.

Avantages clés

✓ Faites glisser l'une des poignées de point de contrôle et regardez la courbe, l'aperçu de l'animation en direct et la chaîne CSS copiable se mettre à jour ensemble - pas besoin de mémoriser les calculs de coordonnées.
✓ Y peut dépasser 0 et 1 pour les effets de ressort et de rebond tandis que X reste limité à la plage 0-1 réellement requise par CSS, de sorte que chaque valeur que vous copiez est valide au moment où vous la collez.
✓ L'aperçu côte à côte compare votre courbe personnalisée à une référence linéaire simple, de sorte que la différence de sensation de mouvement - la raison même d'utiliser l'assouplissement - soit évidente en un coup d'œil, et pas seulement une sortie de code.

Cas d'utilisation

  • • Avez-vous besoin d'une valeur CSS de transition-timing-function ou d'animation-timing-function personnalisée au lieu de l'un des mots-clés de facilité intégrés ?
  • • Voulez-vous voir exactement à quoi ressemble cubique-bezier(0.42, 0, 0.58, 1) — les chiffres réels derrière le mot-clé de facilité d'entrée de CSS — en mouvement avant de l'expédier ?
  • • Créez-vous une animation de bouton rebondissant, modale ou de carte et avez-vous besoin d'une courbe d'atténuation de dépassement prête à copier directement dans votre feuille de style ?