Dans cet article
Que sont les courbes de Bezier cubiques ?
Une courbe de Bezier cubique est une fonction mathematique utilisee en CSS pour definir le timing des animations et des transitions. Ecrite sous la forme cubic-bezier(x1, y1, x2, y2), elle decrit comment une animation progresse du debut a la fin en mappant le temps sur la progression le long d'une courbe lisse definie par quatre points de controle.
En CSS, la fonction cubic-bezier() controle l'easing des proprietes transition-timing-function et animation-timing-function. Au lieu d'un mouvement lineaire, elle vous permet de creer des accelerations et decelerations naturelles qui imitent la physique du monde reel, rendant les animations d'interface polies et intentionnelles.
Comprendre les quatre valeurs de controle
La fonction cubic-bezier() prend quatre valeurs qui definissent deux points de controle sur la courbe. Ces points de controle faconnent la maniere dont l'animation accelere et decelere.
- X1 (0-1) — la position horizontale du premier point de controle, determinant quand la phase d'acceleration initiale se termine
- Y1 (toute valeur) — la position verticale du premier point de controle, controlant la vitesse de demarrage de l'animation. Les valeurs superieures a 1 creent un effet de depassement
- X2 (0-1) — la position horizontale du deuxieme point de controle, determinant quand la phase de deceleration commence
- Y2 (toute valeur) — la position verticale du deuxieme point de controle, controlant comment l'animation se termine. Les valeurs superieures a 1 creent un rebond de depassement
Essayez gratuitement — sans inscription
Creer une courbe de Bezier cubique →Presets d'easing courants et quand les utiliser
CSS fournit plusieurs mots-cles d'easing integres qui correspondent a des valeurs cubic-bezier specifiques. Comprendre ces presets vous aide a choisir le bon ressenti pour vos animations.
- ease (0.25, 0.1, 0.25, 1.0) — le defaut CSS, demarre rapidement puis decelere doucement. Bon pour la plupart des transitions generales
- ease-in (0.42, 0, 1.0, 1.0) — demarre lentement et accelere. Ideal pour les elements quittant l'ecran ou s'effacant
- ease-out (0, 0, 0.58, 1.0) — demarre vite et decelere. Ideal pour les elements entrant a l'ecran ou apparaissant
- ease-in-out (0.42, 0, 0.58, 1.0) — demarrage et fin lents avec milieu rapide. Adapte aux animations en boucle ou aux elements restant a l'ecran
- linear (0, 0, 1, 1) — vitesse constante du debut a la fin. A utiliser pour les barres de progression, les indicateurs de chargement ou les transitions de couleur
Questions frequemment posees
Tous les navigateurs supportent-ils cubic-bezier() ?
Oui. La fonction cubic-bezier() est prise en charge dans tous les navigateurs majeurs depuis IE 10 (2012). Elle fait partie des specifications CSS Transitions et CSS Animations, qui sont entierement supportees dans Chrome, Firefox, Safari, Edge et tous les navigateurs mobiles modernes.
Peut-on creer des animations de rebond avec cubic-bezier() ?
Les courbes de Bezier cubiques peuvent approximer des effets de rebond simples en utilisant des valeurs Y superieures a 1 (depassement). Par exemple, cubic-bezier(0.34, 1.56, 0.64, 1) cree un leger depassement. Cependant, la vraie physique de ressort avec des rebonds multiples necessite CSS spring() (pas encore largement supporte) ou des bibliotheques JavaScript d'animation comme GSAP ou Framer Motion.
Quelle est la difference entre les transitions CSS et les animations CSS ?
Les transitions CSS animent entre deux etats lorsqu'une propriete change (par exemple, au survol). Les animations CSS utilisent des keyframes pour definir des sequences multi-etapes qui peuvent boucler et s'executer de maniere independante. Les deux utilisent les memes fonctions de timing, y compris cubic-bezier(), pour controler l'easing entre les etats ou les keyframes.