Easing
Die Art, wie eine Bewegung zwischen Anfang und Ende beschleunigt und abbremst.
Im Detail
Ohne Easing bewegt sich ein Objekt mit konstanter Geschwindigkeit, und die Bewegung wirkt mechanisch. Mit Easing startet sie langsam und endet mit einem Abbremsen (oder umgekehrt), so wie echte Objekte es tun. In CSS haben die Kurven Namen wie ease, ease-out oder ease-in-out, oder man schreibt sie mit cubic-bezier() für eigene Kurven. Namen wie back oder elastic sind keine CSS-Kurven, sondern Namen aus Animationsbibliotheken wie GSAP.
Faustregel: Was in die Szene kommt, bremst meist bei der Ankunft ab (ease-out); was geht, beschleunigt meist (ease-in). Stark elastische Kurven ziehen die Aufmerksamkeit auf sich, ermüden aber, wenn man sie im ganzen Banner verwendet.
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });Verwandte Begriffe
Wo er vorkommt
So bereitest du einen HTML5-Banner für den Ad Server vorLeitfadenVisualisierer für AnimationskurvenWerkzeugWende die Begriffe in der Praxis an.
Probier es mit einer echten Kampagne aus.