Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de cubic-bezier CSS

CSS Cubic Bezier Generator

Placez les deux points de contrôle d'une courbe d'easing, regardez la cadence réelle sur la piste animée, et copiez les valeurs cubic-bezier() avec la durée.

Parcours de la tâche / de l'entrée au résultat

Placez le premier point de contrôle

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de cubic-bezier CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment concevoir une courbe d'easing cubic-bezier

  1. 01

    Placez le premier point de contrôle

    Réglez Contrôle X1 entre 0 et 1 et Contrôle Y1 entre −1 et 2. Le graphique de la courbe se redessine en direct, avec une ligne de guide qui va du point de départ à votre poignée.

  2. 02

    Placez le second point de contrôle

    Réglez Contrôle X2 (0–1) et Contrôle Y2 (−1 à 2). Tirer une valeur Y au-delà de 1 crée le dépassement qui donne à un easing son côté élastique ; tirer Y1 en dessous de 0 ajoute un moment d'anticipation avant que le mouvement ne démarre.

  3. 03

    Définissez la durée

    Choisissez une Durée de 0.1 à 4 secondes. Le marqueur sur la piste de mouvement la parcourt en boucle avec votre courbe exacte, donc la cadence que vous regardez est celle que vous livrez.

  4. 04

    Ou partez d'une courbe connue

    La courbe par défaut — 0.25, 0.1, 0.25, 1 — est exactement le mot-clé standard ease et un point de départ neutre. Cliquez sur Charger un exemple pour une courbe élastique avec dépassement (0.34, 1.56, 0.64, 1) qui montre ce que fait une valeur Y au-delà de 1.

  5. 05

    Copiez le CSS de timing

    Copier le CSS ou Télécharger le .css enregistre toolars-cubic-bezier.css. La règle .motion définit transition-duration et les deux propriétés timing-function. Elle ne définit pas animation-duration ; ajoutez cette durée séparément pour les animations par images clés.

  6. 06

    Lisez le graphique avant de livrer

    Le graphique trace la progression au fil du temps entre les points de départ et d'arrivée fixes : les sections plates sont lentes, les sections raides rapides. Une courbe qui plonge sous le départ ou dépasse l'arrivée n'est pas une erreur — c'est de l'anticipation et du dépassement, dessinés honnêtement.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de cubic-bezier CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de cubic-bezier CSS fait vraiment

Une modale qui doit s'ouvrir d'un coup sec mais se poser en douceur, un survol de carte qui demande un léger dépassement, une infobulle d'onboarding qui doit sembler posée — l'easing fait la différence entre une interface qui semble aboutie et une interface qui semble par défaut. Tracer la courbe ici, face à un vrai aperçu animé, vaut mieux que deviner quatre nombres dans une feuille de style, et les essais restent dans l'onglet. Quand la boucle semble juste, les quatre valeurs sont déjà correctes pour la production.

Questions fréquentes

Pourquoi X ne peut-il aller que de 0 à 1 alors que Y va de −1 à 2 ?
La norme CSS maintient les deux valeurs X dans [0, 1] pour que le temps avance toujours le long de la courbe. Y n'a pas cette limite — des valeurs sous 0 ou au-dessus de 1 produisent anticipation et dépassement — et cet outil borne Y de −1 à 2, ce qui couvre tous les easings pratiques.
Qu'est-ce qui est exporté exactement ?
Une classe .motion avec trois déclarations : transition-duration réglée sur vos secondes, et la même valeur cubic-bezier() assignée à transition-timing-function et animation-timing-function.
Comment lire l'aperçu ?
Le graphique trace la courbe entre ses points de départ et d'arrivée fixes avec des guides vers les deux poignées de contrôle, et la piste en dessous anime un marqueur à la durée choisie avec la vraie fonction de timing — la cadence honnête, pas une approximation.
Comment façonner un ease-in, un ease-out ou un ressort ?
Poussez le X de la première poignée vers 1 avec un Y bas pour un ease-in à démarrage lent ; ramenez le X de la seconde poignée vers 0 avec un Y haut pour un ease-out doux. Poussez l'un des Y au-delà de 1 pour un ressort qui dépasse sa cible, ou sous 0 pour une anticipation.
La classe fonctionne-t-elle aussi bien pour les transitions que pour les animations à keyframes ?
Oui — la même valeur cubic-bezier() est assignée aux deux propriétés timing-function, et la durée se trouve dans transition-duration. Si vous n'avez besoin que d'un mécanisme, supprimez l'autre ligne après le collage ; la courbe elle-même est indifférente au mécanisme. Avec les keyframes, rappelez-vous que la fonction de timing s'applique entre chaque paire d'images, pas sur l'ensemble de l'exécution.
Quelque chose est-il téléversé ou stocké ?
Non. La courbe est calculée et prévisualisée localement dans cet onglet, aucun compte n'est requis, et rien n'est journalisé ni envoyé. Cliquez sur Réinitialiser pour restaurer l'ease par défaut.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer