Easing

En détail

Sans easing, un objet se déplace à vitesse constante et le mouvement paraît mécanique. Avec easing, il démarre doucement et finit en ralentissant (ou l’inverse), comme le font les objets réels. En CSS, les courbes portent des noms comme ease, ease-out ou ease-in-out, ou s’écrivent avec cubic-bezier() pour des courbes personnalisées. Des noms comme back ou elastic ne sont pas des courbes CSS : ce sont des noms de bibliothèques d’animation, comme GSAP.

Règle pratique : ce qui entre dans la scène ralentit généralement à l’arrivée (ease-out) ; ce qui sort accélère généralement (ease-in). Les courbes très élastiques attirent l’attention, mais fatiguent si on les utilise partout dans la bannière.

document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });

Termes associés

Où il apparaît