용어집 · 애니메이션
이징(Easing)
움직임이 시작에서 끝까지 가속하고 감속하는 방식이에요.
자세히
이징이 없으면 물체는 일정한 속도로 움직여서 기계적으로 보여요. 이징이 있으면 실제 사물처럼 천천히 출발하고 끝에서 감속하거나(또는 그 반대로) 움직여요. CSS에서 곡선은 ease, ease-out, ease-in-out 같은 이름을 가지거나, 직접 만든 곡선은 cubic-bezier()로 써요. back이나 elastic 같은 이름은 CSS 곡선이 아니라 GSAP 같은 애니메이션 라이브러리의 이름이에요.
실용적인 규칙: 장면에 들어오는 요소는 도착할 때 보통 감속해요(ease-out). 나가는 요소는 보통 가속해요(ease-in). 아주 탄력 있는 곡선은 눈에 잘 띄지만, 배너 전체에 쓰면 피로해져요.
예시
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });