[ CSS ] CSS 애니메이션과 JS 애니메이션 차이

기본 배경

• 웹에서 애니메이션은 사용자 경험 향상, 시각적 피드백 제공 등의 기능을 함
• 애니메이션 생성은 CSS 애니메이션, JavaScript 애니메이션 두 가지 접근법이 있음

브라우저 렌더링의 원리

• 브라우저가 웹페이지를 렌더링 하는 과정은 크게 Layout, Paint, Composite 세 단계임
• Layout(Reflow) : 브라우저가 요소의 위치, 크기 계산
• Paint(Repaint) : 브라우저가 요소의 색상, 텍스트, 이미지 등을 그림
• Composite : 브라우저가 각 요소를 올바른 순서로 쌓아서 최종 화면을 만듦

• Reflow : 요소의 크기나 위치가 변경될 때 브라우저가 레이아웃을 다시 계산하는 것

• Repaint : 요소의 색상이나 텍스트가 변경될 때 브라우저가 요소를 다시 그리는 것

• 이 중에서 Reflow, Repaint는 웹페이지의 성능에 큰 영향을 미침

• Repaint는 Reflow보다는 비용이 적지만, 여전히 성능에 영향을 줄 수 있음

• 따라서 애니메이션을 만들 때는 가능하면 Reflow, Repaint를 최소화 해야 함

---

CSS 애니메이션

/* keyframes를 사용하여 애니메이션 정의 */
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.animated-element {
  /* 애니메이션 적용 */
  animation: slide-in 1s ease-out;
}

• CSS만을 사용하여 웹페이지에서 요소를 애니메이션화 하는 방법
• CSS의 transition, animation 속성 사용

장점

1. 성능

• CSS 애니메이션은 브라우저가 GPU(그래픽 처리 장치)를 활용하여 애니메이션을 렌더링 하므로, 복잡한 애니메이션에서도 더 좋은 성능 제공함
• 또한, transform과 opacity 속성을 변경하는 애니메이션은 Reflow와 Repaint 없이 Composite 단계에서만 처리되므로 성능이 훨씬 좋음

2. 간편성

• CSS만으로 애니메이션 만들기 때문에 JavaScript보다 쉽고 빠르게 작성 가능

3. 호환성

• CSS 애니메이션은 모든 현대 브라우저에서 지원됨

단점

1. 제한적인 기능

• CSS는 프로그래밍 언어가 아니기 때문에 복잡한 상호작용이나 로직 다루기 어려움

2. 복잡한 애니메이션

• 복잡한 애니메이션을 만들려면 코드가 복잡해지고 관리하게 어려워짐

---

JavaScript 애니메이션

// 애니메이션 함수 정의
function animate(element) {
  let pos = -100;
  const id = setInterval(frame, 10);
  
  function frame() {
    if (pos >= 0) {
      clearInterval(id);
    } else {
      pos++;
      element.style.transform = `translateX(${pos}%)`;
    }
  }
}

// 애니메이션 실행
const element = document.querySelector('.animated-element');
animate(element);

• JavaScript를 사용하여 웹페이지에서 요소를 애니메이션화 하는 방법
• requestAnimationFrame API, JavaScript 애니메이션 라이브러리 사용

장점

1. 유연성

• 프로그래밍 언어이므로, 복잡한 애니메이션과 상호작용 만들 수 있음

2. 프레임 제어

• requestAnimationFrame API를 사용하면 프레임 정확히 제어 가능

단점

1. 성능

• CPU를 사용하여 렌더링 되기 때문에 복잡한 애니메이션에서는 성능 저하 발생 가능
• 하지만, requestAnimationFrame API를 사용하거나 GPU 가속을 활용하는 라이브러리를 사용하면 이 문제를 해결할 수 있음

2. 복잡성

• JavaScript는 CSS보다 복잡하기 때문에, 애니메이션을 작성하고 이해하는 데 더 많은 시간, 노력 필요

---

정리

• CSS 애니메이션은 간단하고 성능이 좋아 기본적인 애니메이션에 적합하며, JavaScript 애니메이션은 더 복잡하고 동적인 애니메이션이 필요할 때 사용

---

참고

• https://1yoouoo.tistory.com/35