CSS 또는 JavaScript로 애니메이션을 만들 수 있습니다. 무엇을 사용해야 하며 그 이유는 무엇인가요?
웹에서 애니메이션을 만드는 두 가지 기본 방법은 CSS와 JavaScript가 있습니다. 어느 것을 선택할지는 프로젝트의 다른 종속 항목과 원하는 효과의 종류에 따라 달라집니다.
요약
- UI 요소 상태 전환과 같은 간단한 '원샷' 전환에 CSS 애니메이션을 사용합니다.
- 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과를 원할 때 JavaScript 애니메이션을 사용합니다.
- JavaScript로 애니메이션을 만드는 경우 익숙한 웹 애니메이션 API 또는 최신 프레임워크를 사용하세요.
대부분의 기본 애니메이션은 CSS 또는 JavaScript로 만들 수 있지만 투자하는 노력과 시간은 다릅니다 (CSS와 JavaScript의 성능 비교 참고). 각각 장단점이 있지만 좋은 가이드라인은 다음과 같습니다.
- UI 요소에 대해 작고 자체적으로 포함된 상태가 있는 경우 CSS를 사용합니다. CSS 전환 및 애니메이션은 측면에 탐색 메뉴를 표시하거나 도움말을 표시하는 데 적합합니다. JavaScript를 사용하여 상태를 제어할 수도 있지만 애니메이션 자체는 CSS에 있습니다.
- 애니메이션을 세밀하게 제어해야 하는 경우 JavaScript를 사용합니다. Web Animations API는 현재 대부분의 최신 브라우저에서 사용할 수 있는 표준 기반 접근 방식입니다. 이는 실제 객체를 제공하며, 복잡한 객체 지향 애플리케이션에 이상적입니다. JavaScript는 애니메이션을 중지, 일시 중지, 감속 또는 되돌려야 하는 경우에도 유용합니다.
- 전체 장면을 손으로 조정하려는 경우
requestAnimationFrame
를 직접 사용합니다. 이는 고급 자바스크립트 접근 방법이지만 게임을 빌드하거나 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로 상태를 관리하는 데 집중할 수 있으며, 대상 요소에서 적절한 클래스를 설정하기만 하면 브라우저가 애니메이션을 처리하도록 할 수 있습니다. 이 경로를 따르면 요소에서 transitionend
이벤트를 리슨할 수 있지만 이전 버전의 Internet Explorer는 더 이상 지원하지 않을 수 있는 경우에만 가능합니다. 이러한 이벤트를 지원하는 버전은 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와는 달리 상대적으로 새로운 표준입니다. 이 API는 대부분의 최신 브라우저에서 기본적으로 지원됩니다. 지원되지 않는 최신 브라우저에서는 폴리필을 사용할 수 있습니다.
JavaScript 애니메이션을 사용하면 모든 단계에서 요소 스타일을 완벽하게 제어할 수 있습니다. 즉, 애니메이션을 감속, 일시중지, 중지, 되감고, 요소를 원하는 대로 조작할 수 있습니다. 이는 복잡한 객체 지향 애플리케이션을 빌드하는 경우에 특히 유용합니다. 동작을 적절하게 캡슐화할 수 있기 때문입니다.