고성능 애니메이션: Web Animation API

핵심 개념

CSS보다 훨씬 세밀하고 부드럽게 움직이는 애니메이션을 자바스크립트로 직접 조절할 수 있게 해줘요.

코드 분석

HTML5📋 코드 (11줄)

<div id='box' style='width: 50px; height: 50px; background: red;'></div>
<button onclick='runAnim()'>애니메이션 시작</button>
<script>
  function runAnim() {
    document.getElementById('box').animate([
      { transform: 'translateX(0px)', background: 'red' },
      { transform: 'translateX(200px)', background: 'blue' },
      { transform: 'translateX(0px)', background: 'red' }
    ], { duration: 2000, iterations: Infinity });
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Web Animation API 코드의 keyframes 설계,
메모리 누수, 모바일 성능 저하 원인을 찾아
GPU 가속 기준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

WAAPI로 카드 플립, 스크롤 트리거, 페이지 전환 애니메이션을
실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 애니메이션 코드 전체를 분석해서
FPS, GPU 사용률, 모바일 발열,
CSS Animations 대비 성능 차이를 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 WAAPI vs CSS Animations vs Framer Motion vs GSAP이
각각 언제 쓰이는지 현업 사례와 함께 알려줘.

⭐ 이것만 기억하세요

고성능 애니메이션: Web Animation API는 이 3가지만 확실히 잡으세요

1.CSS 애니메이션만으로는 중간에 일시정지하거나 속도를 동적으로 바꾸는 세밀한 제어가 어렵습니다

2.element.animate()로 키프레임과 타이밍을 JS에서 직접 제어하고, play·pause·reverse로 실시간 조작합니다

3.다음 챕터에서 나만의 커스텀 HTML 태그를 만드는 Shadow DOM을 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.32 — 질문하거나 답변을 확인하세요

→

진행도 32 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)