Déplacez les points de contrôle, saisissez des valeurs exactes et rejouez la transition avant de copier la déclaration cubic-bezier() générée.
Fonctionne localement dans votre navigateurL’éditeur transforme quatre points de contrôle (x1, y1, x2, y2) en une fonction cubic-bezier(), trace la courbe de progression correspondante et rejoue une vraie transition CSS avec elle. Courbe, code et aperçu sont construits dans la page : la fonction est composée localement et aucune valeur n’est envoyée.
x1 et x2 restent entre 0 et 1, comme l’exige la grammaire CSS, tandis que y1 et y2 acceptent −2 à 2, ce qui autorise les courbes avec dépassement. Le tracé affiche la fenêtre habituelle de −0,5 à 1,5 et s’étend dès qu’un point de contrôle la dépasse : aucun point ne sort du dessin.
Le bloc est une seule règle — .animated-element { transition: transform <durée>ms cubic-bezier(x1, y1, x2, y2); } : le sélecteur et la propriété animée sont des exemples à remplacer, la fonction de progression vient de cet éditeur. Les quatre nombres sont arrondis à deux décimales, exactement comme dans le panneau de code.
Le panneau de code, l’accélération appliquée au point de lecture et le tracé de la courbe lisent les quatre mêmes champs : l’aperçu ne peut donc pas s’écarter de la déclaration copiée.
L’axe des x va de 0 à 1 et l’axe des y montre la fenêtre de progression ; les lignes verticales marquent les quarts de x, les horizontales tous les 0,5 de y dans la plage visible. Les deux points de contrôle sont dessinés à leurs coordonnées et la courbe est la cubique passant par (0,0), les deux poignées et (1,1).
La fenêtre verticale va de −0,5 à 1,5 par défaut. Si un point de contrôle en sort — le préréglage overshoot place y1 à 1.56 et les champs acceptent jusqu’à 2 —, la fenêtre s’élargit juste assez pour garder le point et son segment de courbe visibles au lieu de les rogner.
Les valeurs de x sont bornées à 0–1, celles de y à −2–2 et la durée à 100–5000 ms, avec un arrondi à deux décimales. La liste des préréglages passe à une entrée Personnalisé dès qu’une valeur est modifiée à la main ou par glissement, pour ne jamais afficher une courbe que les champs ne contiennent plus.
Rien n’est envoyé : après le chargement de la page, choisir un préréglage, glisser, saisir, rejouer, copier et réinitialiser n’a déclenché aucune requête réseau lors des tests en, fr et ja. L’aperçu s’appuie sur l’implémentation des transitions CSS du navigateur et continue donc de fonctionner hors ligne.