Éditeur de courbes cubic-bezier

Comment utiliser l’éditeur de courbes cubic-bezier

1. Faites glisser les deux poignées du graphique. P1 (premier point de contrôle) façonne le début du mouvement, P2 la fin. Le temps va de gauche à droite, la progression de bas en haut.
2. Vous pouvez aussi saisir une valeur dans Valeur cubic-bezier() : une fonction complète comme cubic-bezier(0.4, 0, 0.2, 1), quatre nombres ou un mot-clé comme ease-in-out. Les champs x1, y1, x2 et y2 modifient une coordonnée à la fois.
3. Partez du menu Préréglages (mots-clés CSS, familles sinus à back, courbes Material Design) ou des boutons de mots-clés. Quand votre courbe correspond à un préréglage, son nom s’affiche à côté des boutons.
4. Observez l’Aperçu de l’animation : le point de Votre courbe et celui de linear parcourent la même distance pendant la même Durée. Utilisez Pause/Lecture et Recommencer pour les comparer.
5. Copiez le résultat depuis Fonction de temporisation CSS, ou copiez l’Approximation linear() après avoir choisi son nombre de Segments.

Au clavier : sélectionnez une poignée et déplacez-la avec les flèches, de 0,01 (0,1 avec Maj).

Si votre système demande de réduire les animations, l’aperçu démarre en pause. Appuyez sur Lecture pour le lancer malgré tout.

Ce que signifie cubic-bezier()

Une fonction d’easing CSS associe le temps écoulé d’une transition (de 0 à 1) à sa progression (de 0 à 1). cubic-bezier(x1, y1, x2, y2) décrit cette relation par une courbe de Bézier cubique qui part de (0, 0), arrive en (1, 1) et est attirée par deux points de contrôle, P1 = (x1, y1) et P2 = (x2, y2).

• Les valeurs x représentent le temps et doivent rester entre 0 et 1, sinon la courbe ne serait plus une fonction du temps valide. L’éditeur les maintient dans cet intervalle.
• Les valeurs y représentent la progression et peuvent descendre sous 0 ou dépasser 1. Un y supérieur à 1 fait dépasser la cible puis revenir, comme les courbes Back (dépassement) ; sous 0, l’élément recule d’abord.
• Une pente raide signifie un mouvement rapide, une pente douce un mouvement lent. ease-out démarre vite et finit lentement, ce qui paraît naturel pour un élément qui entre à l’écran. ease-in fait l’inverse et convient aux sorties.

Les mots-clés CSS sont des raccourcis : 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) et linear = (0, 0, 1, 1).

L’approximation linear()

La fonction plus récente linear() énumère des valeurs de progression à intervalles de temps réguliers, par exemple linear(0, 0.25, 0.5, 0.75, 1), et les relie par des segments. L’outil échantillonne votre courbe (il résout l’équation de Bézier pour chaque pas de temps) et écrit ces valeurs avec trois décimales. Avec 20 à 40 segments, le résultat est visuellement identique. linear() sert surtout aux courbes qu’une Bézier ne peut pas dessiner, comme les rebonds et les ressorts. Elle fonctionne dans Chrome et Edge 113+, Firefox 112+ et Safari 17.2+ : gardez la valeur cubic-bezier() comme solution de repli.