Éditeur de courbe d’accélération
Easing Curve Editor
Ajuste une courbe cubic-bezier ou de ressort face à un aperçu animé et rend la fonction de temporisation CSS.
Fait glisser une courbe d’accélération en Bézier cubique et montre ce qu’elle fait à un mouvement réel — un bloc animé par le compositeur du navigateur lui-même, plus une bande de la même courbe échantillonnée à pas de temps réguliers pour que la forme se lise au lieu de seulement se sentir.
Faites glisser l’un des deux points, ou donnez-lui le focus et servez-vous des flèches : avec shift, le pas est dix fois plus grand. La bande grisée va de 0 à 1 ; l’espace au-dessus et au-dessous, c’est le dépassement, qui n’existe que parce que CSS borne x et laisse y libre.
X est borné à 0–1 parce que CSS l’exige : en dehors de cet intervalle, la déclaration entière est invalide et le navigateur la jette. Y est libre volontairement : au-dessus de 1 on obtient un dépassement, au-dessous de 0 un élan préalable, et c’est à peu près tout ce pour quoi on modifie une courbe à la main.
La bande ci-dessous, c’est la même courbe échantillonnée à vingt pas de temps égaux. Des marques qui se resserrent veulent dire que l’animation est lente à cet endroit, et des marques qui s’écartent qu’elle est rapide : la forme de la courbe dite comme un mouvement.
Préréglages
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);Comment s’en servir
Faites glisser les deux points de contrôle
Ou donnez le focus à l’un d’eux et servez-vous des flèches — maj déplace dix fois plus loin. Les nombres en dessous acceptent des valeurs tapées si vous avez une courbe à reproduire.
Regardez la bande, pas le bloc
Un bloc en mouvement est difficile à lire. Les marques en dessous sont la courbe à vingt pas de temps égaux : serrées veut dire lent, espacées veut dire rapide.
Copiez la valeur ou la transition entière
Si vos points tombent exactement sur un mot-clé — `ease`, `ease-in-out` —, c’est ce mot-clé qui est émis, parce qu’il est plus court et qu’il dit l’intention.
Questions fréquentes
Pourquoi ne puis-je pas faire sortir x de l’intervalle 0–1 ?
Parce que CSS l’interdit. Un x hors de cet intervalle rend la déclaration entière invalide et le navigateur abandonne la propriété — l’outil borne donc plutôt que de vous laisser fabriquer quelque chose qui ne fait rien en silence.
À quoi sert un y hors de 0–1 ?
Au dépassement au-dessus de 1 — l’élément va au-delà de sa cible et revient se poser — et à l’anticipation en dessous de 0, où il recule avant d’avancer. Ces deux effets sont l’essentiel de ce qui pousse quelqu’un à modifier une courbe plutôt qu’à prendre un mot-clé.
L’aperçu est-il fidèle ?
Oui : il passe la fonction de temporisation au navigateur sous forme d’animation CSS, c’est-à-dire le même chemin de code que prendra votre `transition`. Échantillonner la courbe dans une boucle JavaScript aurait l’air semblable et ne serait pas la même chose.
Puis-je obtenir un ressort ou un rebond ?
Pas un vrai. Une Bézier cubique a deux points de contrôle et ne peut dépasser qu’une fois ; un ressort oscille et demande `linear()` avec de nombreux arrêts, ou une bibliothèque d’animation physique. Le dépassement disponible ici est ce dont une courbe unique s’approche le plus.
À alimenter depuis
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Éditeur de tracé SVG
SVG Path Editor
Convertit les données d’un tracé entre commandes absolues et relatives, le déplace, l’échelonne, le fait pivoter et l’inverse, et montre sa boîte englobante avec un aperçu en direct.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.