이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 애니메이션과 JavaScript 애니메이션 비교

CSS 또는 JavaScript로 애니메이션을 만들 수 있습니다. 어떤 방법을 사용해야 하나요?

Paul Lewis

Sam Thorogood

웹에서 애니메이션을 만드는 방법에는 CSS와 JavaScript라는 두 가지 기본 방법이 있습니다. 어떤 것을 선택할지는 프로젝트의 다른 종속 항목과 달성하려는 효과의 종류에 따라 다릅니다.

요약

UI 요소 상태 전환과 같이 더 간단한 '일회성' 전환에는 CSS 애니메이션을 사용하세요.
튀김, 중지, 일시중지, 되감기, 감속과 같은 고급 효과를 사용하려면 JavaScript 애니메이션을 사용하세요.
JavaScript로 애니메이션을 만들려면 Web Animations API 또는 익숙한 최신 프레임워크를 사용하세요.

대부분의 기본 애니메이션은 CSS 또는 JavaScript로 만들 수 있지만, 노력과 시간이 다릅니다 (CSS 및 JavaScript 성능 비교 참고). 각 방법에는 장단점이 있지만 다음은 좋은 가이드라인입니다.

UI 요소에 더 작고 독립적인 상태가 있는 경우 CSS를 사용하세요. CSS 전환 및 애니메이션은 탐색 메뉴를 측면에서 가져오거나 도움말을 표시하는 데 적합합니다. JavaScript를 사용하여 상태를 제어할 수도 있지만 애니메이션 자체는 CSS에 있습니다.
애니메이션을 세부적으로 제어해야 하는 경우 JavaScript를 사용하세요. Web Animations API는 현재 대부분의 최신 브라우저에서 사용할 수 있는 표준 기반 접근 방식입니다. 이렇게 하면 복잡한 객체 지향 애플리케이션에 적합한 실제 객체가 제공됩니다. JavaScript는 애니메이션을 중지, 일시중지, 감속 또는 역전시켜야 할 때도 유용합니다.
전체 장면을 직접 조정하려면 requestAnimationFrame를 직접 사용하세요. 이는 고급 JavaScript 접근 방식이지만 게임을 빌드하거나 HTML 캔버스에 그리기할 때 유용할 수 있습니다.

또는 jQuery의 .animate() 메서드나 GreenSock의 TweenMax와 같이 애니메이션 기능이 포함된 JavaScript 프레임워크를 이미 사용하고 있다면 애니메이션에 이를 사용하는 것이 더 편리할 수 있습니다.

CSS로 애니메이션 만들기

CSS로 애니메이션을 적용하는 것은 화면에서 움직이는 항목을 만드는 가장 간단한 방법입니다. 이 접근 방식은 원하는 작업을 지정하기 때문에 선언적이라고 합니다.

다음은 X 및 Y 축 모두에서 요소 100px를 이동하는 CSS입니다. 500ms을 사용하도록 설정된 CSS 전환을 사용하면 됩니다. move 클래스가 추가되면 transform 값이 변경되고 전환이 시작됩니다.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

직접 해 보기

전환 시간 외에도 애니메이션의 느낌을 결정하는 이징 옵션이 있습니다. 이음에 관한 자세한 내용은 이음 기본사항 가이드를 참고하세요.

위 스니펫과 같이 애니메이션을 관리하기 위해 별도의 CSS 클래스를 만드는 경우 JavaScript를 사용하여 각 애니메이션을 켜거나 끌 수 있습니다.

box.classList.add('move');

이렇게 하면 앱의 균형이 잘 잡힙니다. JavaScript로 상태를 관리하는 데 집중하고 타겟 요소에 적절한 클래스를 설정하기만 하면 브라우저에서 애니메이션을 처리합니다. 이 경로를 선택하면 이전 버전의 Internet Explorer 지원을 포기할 수 있는 경우에만 요소에서 transitionend 이벤트를 수신 대기할 수 있습니다. 버전 10이 이러한 이벤트를 지원하는 첫 번째 버전이었습니다. 다른 모든 브라우저는 한동안 이 이벤트를 지원해 왔습니다.

전환 종료를 리슨하는 데 필요한 JavaScript는 다음과 같습니다.

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

CSS 전환을 사용하는 것 외에도 CSS 애니메이션을 사용할 수 있습니다. 이를 통해 개별 애니메이션 키프레임, 시간, 반복을 훨씬 더 세부적으로 제어할 수 있습니다.

예를 들어 전환과 동일한 방식으로 상자에 애니메이션을 적용하지만 클릭과 같은 사용자 상호작용 없이 무한 반복으로 애니메이션을 적용할 수 있습니다. 여러 속성을 동시에 변경할 수도 있습니다.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

직접 해 보기

CSS 애니메이션을 사용하면 타겟 요소와 관계없이 애니메이션 자체를 정의하고 animation-name 속성을 사용하여 필요한 애니메이션을 선택할 수 있습니다.

CSS 애니메이션이 이전 브라우저에서 작동하도록 하려면 공급업체 접두사를 추가해야 합니다. 필요한 CSS의 접두사 버전을 만들 수 있는 많은 도구가 있으므로 소스 파일에 접두사 없는 버전을 작성할 수 있습니다.

JavaScript 및 Web Animations API로 애니메이션 만들기

JavaScript로 애니메이션을 만드는 것은 CSS 전환이나 애니메이션을 작성하는 것보다 비교적 복잡하지만 일반적으로 개발자에게 훨씬 더 강력한 기능을 제공합니다. Web Animations API를 사용하여 특정 CSS 속성에 애니메이션을 적용하거나 컴포저블 효과 객체를 빌드할 수 있습니다.

JavaScript 애니메이션은 코드의 일부로 인라인으로 작성하므로 필수입니다. 다른 객체 내에 캡슐화할 수도 있습니다. 다음은 앞에서 설명한 CSS 전환을 다시 만들기 위해 작성해야 하는 JavaScript입니다.

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

기본적으로 웹 애니메이션은 요소의 프레젠테이션만 수정합니다. 객체가 이동한 위치에 계속 있도록 하려면 샘플에 따라 애니메이션이 완료된 후 기본 스타일을 수정해야 합니다.

직접 해 보기

Web Animations API는 W3C의 비교적 새로운 표준입니다. 대부분의 최신 브라우저에서 기본적으로 지원됩니다. 지원되지 않는 최신 브라우저의 경우 polyfill을 사용할 수 있습니다.

JavaScript 애니메이션을 사용하면 모든 단계에서 요소의 스타일을 완전히 제어할 수 있습니다. 즉, 애니메이션 속도를 늦추거나, 일시중지하거나, 중지하거나, 역재생하거나, 원하는 대로 요소를 조작할 수 있습니다. 이는 동작을 적절하게 캡슐화할 수 있으므로 복잡한 객체 지향 애플리케이션을 빌드하는 경우에 특히 유용합니다.