Générateur CSS Easing / cubic-bezier

cubic-bezier(x1, y1, x2, y2) définit une courbe de Bézier cubique utilisée comme fonction de synchronisation CSS pour les transitions et animations. La courbe est définie par 4 points : P0=(0,0) début, P1=(x1,y1) point de contrôle 1, P2=(x2,y2) point de contrôle 2, P3=(1,1) fin. x1, x2 doivent être dans [0,1] (axe du temps). y1, y2 peuvent être en dehors de [0,1] pour les effets de dépassement. Les mots-clés CSS correspondent à des courbes spécifiques : ease = (0.25, 0.1, 0.25, 1.0), ease-in = (0.42, 0, 1.0, 1.0), ease-out = (0, 0, 0.58, 1.0), ease-in-out = (0.42, 0, 0.58, 1.0), linear = (0, 0, 1, 1).

ease-in : commence lentement, se termine rapidement — comme un objet démarrant depuis le repos (gravité). ease-out : commence rapidement, se termine lentement — comme une balle atterrissant sur une surface. ease-in-out : début lent, milieu rapide, fin lente — courbe S symétrique. linear : vitesse constante. ease : la valeur CSS par défaut — légèrement ease-in, puis ease-out. Règles pratiques : utilisez ease-out pour les éléments entrant à l'écran (semble naturel). Utilisez ease-in pour les éléments qui quittent (accélèrent hors de l'écran). Utilisez ease-in-out pour les transitions d'état. N'utilisez jamais linear pour l'interface — cela semble mécanique et robotique.

Cubic-bezier : durée fixe, synchronisation sans physique. L'animation prend toujours exactement la durée spécifiée. Ressort : basé sur la physique avec masse, rigidité, amortissement et vélocité. La durée n'est pas fixe — elle s'exécute jusqu'à ce que le système se stabilise. Les ressorts peuvent dépasser et osciller naturellement. CSS ne supporte pas les ressorts nativement — ils nécessitent JavaScript (Framer Motion, React Spring, GSAP). Pour le CSS pur, cubic-bezier avec des valeurs y en dehors de [0,1] approxime le dépassement d'un ressort. Exemple : cubic-bezier(0.34, 1.56, 0.64, 1) crée un léger dépassement de type ressort.

Principes : les objets dans le monde réel ne démarrent ni ne s'arrêtent instantanément. Suivez les interactions matérielles : les éléments entrant à l'écran doivent ease out (décélérer à l'arrivée). Les éléments qui partent doivent ease in (accélérer au départ). Les changements d'état (expansion, réduction) utilisent ease-in-out. Les micro-interactions (appui sur bouton) utilisent ease-out pour la réponse, ease-in pour la réinitialisation. Material Design utilise : courbe standard (0.4, 0, 0.2, 1), décélération (0, 0, 0.2, 1), accélération (0.4, 0, 1, 1). iOS utilise des animations à ressort avec un léger dépassement.

CSS linear() (2023) permet une interpolation linéaire multi-arrêts — essentiellement une fonction linéaire par morceaux approximant des courbes complexes. Syntaxe : animation-timing-function: linear(0, 0.25, 1); Un easing de rebond : linear(0, 0.063, 0.25 18.2%, 1 36.4%, 0.813 54.5%, 1 72.7%, 0.941 81.8%, 1). C'est ainsi que vous obtenez des animations à ressort, de rebond et de physique complexe sans JavaScript. La fonction JavaScript generateLinearEasing() de la Web Animations API peut calculer ces valeurs à partir de toute simulation physique. Support navigateur : Chrome 113+, Firefox 112+, Safari 17.2+.