[CS] CSS 애니메이션과 JS 애니메이션의 차이점

오늘은 CSS 애니메이션과 JS 애니메이션 차이점에 대해 알아보자!

---

목차

1. CSS 애니메이션
2. JS 애니메이션
3. CSS 애니메이션 vs JS 애니메이션

---

01. CSS 애니메이션

CSS만을 사용하여 HTML 문서 요소를 애니메이션을 화하는 방법으로 transition, animation 속성을 사용한다.

장점	단점
성능(브라우저 GPU 활용 -> 애니메이션 렌더링)	제한적인 기능(복잡한 상호작용, 로직 다루기어려움)
간편성(CSS만을 사용해 애니메이션 제작 가능, JS보다 쉽고 빠름)	복잡한 애니메이션(코드 구현 및 관리 어려움)
호환성(모든 현대 브라우저에서 지원)

<style>
    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%;
      }

      to {
        margin-left: 0%;
        width: 100%;
      }
    }
</style>

 

02. JS 애니메이션

JS를 사용하여 HTML 문서 요소를 애니메이셔 화하는 방법으로, JS 애니메이션 라이브러리를 사용한다.

장점	단점
유연성(프로그래밍 언어)	성능(CPU를 사용한 렌더링)
프레임 제어(requestAnimationFrame API 사용)	복잡성(CSS보다 복잡함 -> 더 많은 시간, 노력 투자 필요)

 

 

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

CSS 애니메이션	JS 애니메이션
간단하게 처리하는 애니메이션인 경우에 사용	CSS 처리하기 복잡하고 무거운 애니메이션인 경우에 사용
외부 라이브러리 필요 x	외부 라이브러리 등을 통해 성능 좋은 애니메이션 구현
애니메이션 적용할 요소를 직관적으로 파악 가능	브라우저 호환성 좋음
	세밀한 애니메이션 제어 가능