Générateur d'Easing CSS
Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
Qu'est-ce qu'une fonction d'easing en CSS ?
Une fonction d'easing contrôle la vitesse à laquelle une animation ou une transition progresse dans le temps. Un élément n'est pas obligé d'avancer à vitesse constante : il peut démarrer lentement, accélérer, dépasser la cible puis se stabiliser. En CSS, on la définit avec transition-timing-function ou animation-timing-function.
Que signifient les quatre nombres de cubic-bezier() ?
cubic-bezier(x1, y1, x2, y2) définit une courbe à l'aide de deux points de contrôle. Le premier façonne le début du mouvement, le second sa fin. X représente le temps sur une échelle de 0 à 1, et Y représente la progression : 0 est la valeur de départ, 1 la valeur finale.
Pourquoi Y peut-il sortir de 0 à 1 alors que X non ?
X correspond au temps réel : une valeur inférieure à 0 ou supérieure à 1 briserait la causalité et la spécification l'interdit. Y est libre : au-dessus de 1 on dépasse la cible, en dessous de 0 on recule avant d'avancer — c'est ainsi que les préréglages Back créent leur effet de rebond.
Quelle différence entre ease, ease-in et ease-out ?
ease est la valeur par défaut du navigateur, avec un départ doux et une arrivée en douceur ; ease-in démarre lentement et finit vite ; ease-out démarre vite et ralentit ; ease-in-out combine les deux. Le générateur inclut aussi sine, quad, cubic, quart, expo, back et material — 18 au total.
Comment fonctionne l'aperçu avec la balle ?
Deux balles bouclent pendant la durée choisie. La balle du haut avance toujours selon une fonction linéaire de référence, celle du bas suit votre courbe. L'écart entre elles, qui grandit et se resserre, montre précisément ce que votre easing change.
Où coller la valeur générée ?
Utilisez-la comme valeur de transition-timing-function ou animation-timing-function, par exemple transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. L'outil produit la fonction cubic-bezier(...) brute, prête à insérer dans n'importe quelle règle.
La fonction d'easing influence-t-elle les performances d'animation ?
La fonction de temporisation ne coûte rien en soi : elle remappe seulement la progression dans le temps. Les performances dépendent des propriétés animées : transform et opacity sont compatibles GPU, tandis qu'animer des propriétés de mise en page comme width ou top provoque des reflows coûteux quel que soit l'easing.
Puis-je créer un vrai effet de rebond ou élastique ?
Un seul cubic-bezier peut dépasser la cible une fois, mais il ne peut pas produire les rebonds multiples d'un vrai easing bounce ou élastique. Pour cela, enchaînez plusieurs keyframes dans @keyframes ou utilisez l'API Web Animations ; le dépassement unique et fluide est précisément ce que fait bien cubic-bezier et ce que propose cet outil.
Ce que je fais ici est-il envoyé à un serveur ?
Non. La courbe est dessinée sur un canvas local et l'animation d'aperçu tourne entièrement dans votre navigateur. Rien n'est transmis à un serveur ; le générateur fonctionne donc aussi hors ligne une fois la page chargée.
Comment utiliser Générateur d'Easing CSS
Sculptez visuellement des courbes d'easing CSS au lieu de deviner des nombres. Faites glisser les points de contrôle, comparez votre mouvement à une référence linéaire et copiez le cubic-bezier fini en un clic. Tout tourne localement dans votre navigateur.
- Choisissez l'un des 18 préréglages comme Ease Out, Expo Out ou Back Out comme point de départ.
- Faites glisser les deux poignées de la courbe : l'axe X est le temps et doit rester entre 0 et 1, l'axe Y est la progression et peut dépasser.
- Ajustez finement les coordonnées exactes de P1 et P2 avec les champs numériques si vous avez besoin de précision.
- Réglez le curseur de durée et regardez les deux balles en boucle — la creuse est toujours linéaire, la pleine utilise votre courbe.
- Copiez la valeur cubic-bezier générée dans transition-timing-function ou animation-timing-function.
Poussez une poignée Y au-dessus de 1 pour un dépassement assuré, comme cubic-bezier(0.34, 1.56, 0.64, 1) — cela rend les boutons et les cartes élastiques sans aucune keyframe.
Outils associés
- Générateur de Dégradés CSS Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
- Générateur de Loaders CSS Générateur de loaders CSS gratuit : dix spinners de chargement en CSS pur avec réglage en direct de taille, vitesse, épaisseur et couleur, et copie du HTML et du CSS prêts à coller.
- Générateur de Border Radius Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur de Text Shadow CSS Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.
- Générateur de Clip Path CSS Générateur en ligne gratuit de clip-path CSS. Créez des formes polygon, circle, ellipse et inset avec des points déplaçables, aperçu en direct et copie du code CSS en un clic.
- Beautificateur CSS Formatez et embellissez le code CSS instantanément. Convertissez le CSS minifié en code lisible et bien indenté avec des options personnalisables.
- Minificateur CSS Minificateur CSS en ligne gratuit. Compressez et optimisez instantanément le code CSS en supprimant espaces, commentaires et caractères inutiles. Réduisez la taille pour de meilleures performances web.