Javascript/배경 & 실무 지식

JavaScript Animation과 CSS Animation 차이

BeomBe 2024. 2. 16. 14:35
반응형

CSS 애니메이션과 JavaScript 애니메이션은 웹 페이지에서 동적인 요소를 만들기 위해 사용되지만 다른 접근방식을 보입니다.

 

1. CSS 애니메이션

  • CSS 애니메이션은 CSS 속성을 사용하여 웹 요소에 애니메이션 효과를 적용하는 방식
  • 주로 @keyframes 규칙을 사용하여 애니메이션의 시작 상태와 종료 상태, 그리고 중간 단계의 스타일을 정의
  • CSS 애니메이션은 주로 시각적인 요소에 대한 애니메이션에 사용됩니다. 예를 들어, 요소의 이동, 회전, 크기 변화, 색상 변화 등을 담당
  • CSS 애니메이션은 브라우저에 내장된 애니메이션 엔진을 사용하므로, 성능 면에서 일반적으로 JavaScript 애니메이션보다 부드럽고 효율적
  • CSS 애니메이션은 간단한 애니메이션 효과를 적용하기에 편리하며, 코드가 간결하고 유지보수가 용이

 

2. JavaScript 애니메이션

  • JavaScript 애니메이션은 JavaScript 코드를 사용하여 웹 요소에 애니메이션 효과를 적용하는 방식
  • JavaScript를 사용하여 요소의 스타일이나 속성을 직접 변경하거나, 타이머 함수를 사용하여 특정 시간에 애니메이션을 제어
  • JavaScript 애니메이션은 CSS 애니메이션보다 더 다양한 동작을 구현할 수 있습니다. 예를 들어, 사용자 입력에 따라 애니메이션을 시작하거나 멈출 수 있음
  • JavaScript 애니메이션은 더 복잡한 상호작용이나 동적인 애니메이션 효과를 구현할 때 유용
  • JavaScript 애니메이션은 브라우저에서 CSS 애니메이션보다 더 많은 계산을 수행해야 하므로 성능 면에서 더 많은 리소스를 요구

3. CSS 애니메이션 예시와 JS 애니메이션 예시

3-1. CSS 애니메이션 예시
- box라는 클래스를 가진 요소를 생성하고, CSS 애니메이션을 사용하여 요소를 좌우로 이동시키는 예시

@keyframes 규칙을 사용하여 애니메이션의 시작 상태와 종료 상태를 정의하고, animation-name, animation-duration, animation-iteration-count, animation-direction 등의 CSS 속성을 사용하여 애니메이션을 설정

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(200px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

 

3-2. JS 애니메이션 예시

- JavaScript를 사용하여 <div> 요소를 좌우로 이동시키는 예시

JavaScript 코드를 사용하여 요소의 위치를 변경하고, *requestAnimationFrame() 함수를 사용하여 애니메이션을 반복 실행합니다. 이 예시에서는 변수 position과 direction을 사용하여 요소의 위치와 이동 방향을 제어

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    var box = document.querySelector('.box');
    var position = 0;
    var direction = 1;

    function animateBox() {
      position += direction * 5;
      box.style.transform = 'translateX(' + position + 'px)';

      if (position >= 200 || position <= 0) {
        direction *= -1;
      }

      requestAnimationFrame(animateBox);
    }

    animateBox();
  </script>
</body>
</html>

 

CSS 애니메이션과 JavaScript 애니메이션은 각각의 특징과 용도에 따라 선택되어야 합니다. 단순한 시각적 효과를 구현하려면 CSS 애니메이션을 사용하는 것이 간단하고 효율적일 수 있으며, 더 복잡한 상호작용이나 동적인 애니메이션을 구현해야 할 때는 JavaScript 애니메이션을 고려해야 합니다.

 

* requestAnimationFrame()

- 웹 브라우저에게 애니메이션을 실행하고자 함을 알리는 함수입니다. 이 함수를 호출하면 브라우저는 다음 프레임을 그리기 전에 애니메이션을 업데이트하는 적절한 시점에 지정한 콜백 함수를 호출합니다. 이를 통해 부드러운 애니메이션을 구현할 수 있습니다.

 

반응형