Générateur de cubic-bezier (easing CSS)
Dessinez des courbes d’animation cubic-bezier en faisant glisser les points de contrôle, comparez avec ease, ease-in-out et d’autres courbes prêtes à l’emploi et copiez le CSS de la transition.
Mode d’emploiÉditeur de courbe cubic-bezier
Disponible en: 
Générateur de cubic-bezier (easing CSS): à quoi ça sert
Faites glisser les deux points de contrôle sur le graphique ou choisissez une courbe prête à l’emploi, comme ease, ressort et anticipation. Réglez la durée et comparez l’animation de votre courbe avec une animation linéaire avant de copier le CSS pour transition ou animation.
Mode d’emploi
- Choisissez un modèle ou faites glisser les points.
- Définissez la durée et testez l’animation.
- Copiez le CSS.
Quand l’utiliser
- Créer des animations plus naturelles dans les interfaces.
- Ajuster les transitions de menus et de fenêtres modales.
- Étudier les fonctions d’easing.
Questions fréquentes
Qu’est-ce que cubic-bezier ?
C’est la fonction qui définit l’accélération d’une transition ou d’une animation CSS. Les quatre nombres sont les coordonnées x et y de deux points de contrôle ; x va de 0 à 1 et y peut dépasser ces limites pour créer un effet de ressort.
Quelle courbe utiliser dans les interfaces ?
Pour les éléments qui entrent à l’écran, les courbes qui ralentissent à la fin, comme cubic-bezier(0.22, 1, 0.36, 1), paraissent plus naturelles. Pour les sorties, préférez des courbes qui accélèrent, comme ease-in.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.