CSS 애니메이션 vs JS 애니메이션

CSS 애니메이션과 JavaScript 애니메이션은 모두 웹 애플리케이션에서 요소의 움직임과 변화를 구현하는 방법이다. 다만 구현 방식과 특징에서 차이가 있다.

CSS 애니메이션

선언적인 방식: HTML 요소의 클래스에 특정한 CSS 규칙을 추가하여 정의. 미리 만들어진 클래스에 의해 애니메이션 동작이 트리거
퍼포먼스: 브라우저의 GPU 가속을 활용하여 부드럽고 효율적인 애니메이션 구현
단순한 애니메이션: 기본적인 애니메이션 효과나 트랜지션을 구현하기에 적합
키 프레임: @keyframes 규칙을 사용하여 애니메이션의 시작과 끝 상태를 정의
자동 재생: HTML 요소에 클래스를 추가하는 것만으로 자동으로 실행

예시

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
.box:hover {
  width: 200px;
}

JavaScript 애니메이션

명령적인 방식: 코드 내에서 요소의 스타일 속성을 직접 변경하여 구현. 일반적으로 requestAnimationFrame을 사용하여 애니메이션 프레임을 조작
더욱 유연한 제어: JavaScript를 사용하면 더 복잡하고 동적인 애니메이션 구현 가능.
복잡한 애니메이션: 더 많은 로직이 필요한 애니메이션, 예를 들어 요소 간의 상호작용이 필요한 경우 JavaScript 애니메이션 사용
타이밍 제어: 시작, 일시 정지, 중지 등을 직접 제어
자동 재생 관리: JavaScript로 애니메이션을 만들 경우, 자동 재생을 직접 관리해야 한다.

예시

<div class="box"></div>
<button id="animateButton">Animate</button>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

const box = document.querySelector('.box')
const animateButton = document.getElementById('animateButton')
 
animateButton.addEventListener('click', () => {
  let width = 100
  const targetWidth = 200
  const animationDuration = 1000
  const frameRate = 60
 
  const increment =
    (targetWidth - width) / (animationDuration / (1000 / frameRate))
 
  const animate = () => {
    if (width <= targetWidth) {
      box.style.width = width + 'px'
      width += increment
      requestAnimationFrame(animate)
    }
  }
 
  animate()
})

비교

간단한 트랜지션 또는 애니메이션의 경우 CSS 애니메이션 추천
복잡한 동작을 구현하거나 사용자 입력에 따라 동적으로 변하는 애니메이션을 만들어야 한다면 JavaScript 애니메이션 추천
두 방법을 혼합하여 사용하는 것도 가능. 예를 들어, CSS로 기본적인 트랜지션을 구현하고 JavaScript로 동적인 상호작용을 추가할 수 있다.

CORS CSS 박스 모델