웹 애니메이션 제대로 활용하기: Transition, Keyframes, rAF, WAAPI 비교와 활용법

웹 애니메이션은 사용자 경험(UX)을 강화하는 핵심 요소입니다. 작은 버튼 호버 효과부터 데이터 기반 시각화까지, 상황에 따라 어떤 방식으로 구현하느냐에 따라 성능과 가독성이 크게 달라질 수 있습니다. 이번 글에서는 Transition/Transform/Opacity, Keyframes, requestAnimationFrame(rAF), Web Animations API(WAAPI) 네 가지 대표적인 접근법을 비교하고, 실제로 언제 어떤 걸 쓰면 좋은지 정리해보겠습니다.

 

 

---

1. CSS Transition + Transform / Opacity

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

 

transition: <property> <duration> <timing-function> <delay>;

 

Transition은 상태 변화(hover, active 등)를 부드럽게 연결해주는 데 특화되어 있습니다. 특히 transform과 opacity는 GPU 합성 단계에서 처리되므로 성능상 이점이 큽니다.

예를 들어, 쇼핑몰 카드 hover 시 확대되면서 그림자가 강조되거나, 버튼 클릭 시 살짝 튀어나오는 효과는 transition으로 간단히 처리할 수 있습니다.

button {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

 

 

transition은 해당 속성 값이 바뀌는 순간에 발동합니다.

즉,

• DOM 요소의 스타일이 초기값 → 다른 값으로 바뀌는 시점
• 혹은 클래스 토글/스타일 속성 변경으로 CSS 속성이 변할 때

에 브라우저가 두 값 사이를 부드럽게 보간합니다.

 

=> 즉, .class 추가/제거, JS에서 style.height = ... 같은 변경이 일어난 순간이 트리거가 됩니다.

---

예시 흐름

.box {
  height: 0;
  transition: height 0.6s ease;
}

.box.expand {
  height: 200px;
}

• 처음엔 .box → height: 0
• JS에서 .expand 클래스를 추가하면 → height: 200px
• 이 시점에 transition이 발동하여 0 → 200px으로 0.6초 동안 부드럽게 변화합니다.

---

주의할 점

• transition은 초기 렌더링 시에는 발동하지 않습니다.
  (DOM이 그려질 때 이미 값이 정해져 있으면 “변화”가 아니므로 애니메이션 없음)
• 반드시 값이 바뀌는 순간이 있어야 합니다.
• display처럼 애니메이션 불가능한 속성은 transition이 발동하지 않습니다.
• height: auto → height: 0 같은 경우처럼, 직접 애니메이션할 수 없는 값(auto)은 발동하지 않음. → 그래서 보통 scrollHeight(px)로 계산한 값을 넣습니다.

 

---

2. CSS Keyframes Animation: 반복 동작과 패턴 애니메이션에 최적화

https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

@keyframes - CSS: Cascading Style Sheets | MDN

 

 

 

Transition은 한 번의 상태 변화에 적합하지만, 주기적이고 반복적인 애니메이션이 필요할 땐 Keyframes가 강력합니다. 로딩 스피너, 배너 롤링, 주기적 강조 효과 등에 적합합니다.

@keyframes scaleAnimation {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.loader {
  width: 40px; height: 40px;
  background: steelblue;
  animation: scaleAnimation 2s ease-in-out infinite;
}

 

특징

• @keyframes 규칙을 사용하여 특정 속성이 시간에 따라 어떻게 변하는지를 단계별로 정의하는 방식입니다.
• 단순히 한 번의 상태 전환을 처리하는 transition과 달리, 여러 단계를 정의하거나 반복(loop) 시킬 수 있습니다.
• CSS만으로도 독립적으로 실행되며, 자바스크립트가 없어도 자동으로 애니메이션이 동작합니다.

 

문법

@keyframes myAnimation {
  0%   { transform: translateY(0);   opacity: 0; }
  50%  { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(0);   opacity: 1; }
}

.box {
  animation: myAnimation 1s ease-in-out infinite;
}

• @keyframes → 애니메이션 이름 정의
• 0%, 50%, 100% → 시간 축에서 속성 값 변화 정의
• .box에 animation 속성 적용 → 이름/시간/타이밍 함수/반복 여부 설정

 

속성

• animation-name → @keyframes 이름 지정
• animation-duration → 재생 시간 (예: 2s)
• animation-timing-function → 속도 곡선 (예: ease-in-out, cubic-bezier)
• animation-delay → 시작 지연 시간
• animation-iteration-count → 반복 횟수 (예: infinite)
• animation-direction → normal, reverse, alternate 등 (왕복 애니메이션 가능)
• animation-fill-mode → 시작 전/끝난 후 상태 유지 여부 (forwards, backwards, both)

 

 

---

3. requestAnimationFrame (rAF): 정교한 제어가 필요한 경우

CSS 애니메이션으로 해결하기 어려운 경우, 특히 스크롤, 데이터 시각화, 상호작용 기반 애니메이션에는 requestAnimationFrame이 필요합니다.

rAF는 브라우저의 리페인트 주기(VSync)에 맞춰 호출되므로, setInterval보다 훨씬 부드럽고 효율적입니다.

const box = document.getElementById('box');
let start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  box.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;

  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

활용 예시

• 패럴랙스 스크롤
• 차트 점진적 그리기
• 지도에서 자연스러운 이동

---

4. Web Animations API (WAAPI): 정밀 제어가 필요할 때

WAAPI는 JS에서 CSS Keyframes처럼 애니메이션을 정의하고, pause/play/reverse/finish 등 정밀 제어를 제공합니다. 디자인 시스템이나 대시보드처럼 애니메이션 상태를 직접 관리해야 하는 경우 적합합니다.

const el = document.getElementById('animatedElement');
const anim = el.animate(
  [
    { transform: 'scale(1)' },
    { transform: 'scale(1.5)' }
  ],
  { duration: 1000, iterations: Infinity, direction: 'alternate' }
);

// 필요 시 제어 가능
anim.pause();
anim.play();

장점

• 런타임 제어 (중간에 멈추기, 되감기, 속도 변경)
• CSS + JS 혼합 애니메이션 전략 수립 가능

---

결론

 

• Transition/Transform/Opacity → UI 피드백 (버튼, hover, 모달 등장)
• Keyframes → 반복적/지속적 동작 (스피너, 배너)
• requestAnimationFrame → 상호작용/데이터 기반 애니메이션 (스크롤, 차트)
• WAAPI → 조건부/정밀 제어가 필요한 경우 (대시보드, 디자인 시스템)

 

웹 애니메이션은 “예쁘게 꾸미기” 수준을 넘어, 사용자의 시선을 자연스럽게 이끌고 인터랙션을 직관적으로 만드는 도구입니다. 단순한 UI 피드백은 Transition/Keyframes로, 데이터 기반 혹은 조건 제어가 필요하다면 rAF나 WAAPI로 접근할 수 있습니다.

 

궁극적으로 중요한 건 맥락에 맞는 도구 선택입니다. 불필요한 애니메이션은 오히려 UX를 해칠 수 있으니, “왜 이 애니메이션이 필요한가?”를 먼저 고민하는 습관이 필요하다고 느꼈습니다