Visualiseur d’Easing et d’Animation CSS

Réglez le minutage des animations CSS en voyant la courbe d’easing et un aperçu en direct simultanément.

Entrées :

• Saisissez un cubic-bezier(x1, y1, x2, y2) personnalisé, choisissez un préréglage nommé (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) ou un mot-clé.
• Réglez durée (ms) et délai (ms).

Le rapport affiche :

• La courbe d’easing (progression vs temps) en SVG, avec les deux points de contrôle Bézier, sur une référence linéaire en pointillés. Les courbes en dépassement (y<0 ou y>1, comme ease-out-back) sont signalées car elles produisent un rebond mais peuvent causer des sauts de mise en page.
• Trois aperçus en direct — translateX, opacity et scale — animés avec le easing CSS réel, avec un bouton de relecture.
• CSS prêt à copier aux formats transition et @keyframes.

Le solveur Bézier utilise Newton-Raphson avec repli par bissection pour mapper temps → progression comme les navigateurs.