Web Animations API

Web Animations API를 사용하면 웹 페이지의 프레젠테이션, 즉 DOM 요소의 애니메이션에 대한 변경 사항을 동기화하고 타이밍을 조정할 수 있습니다. 이는 타이밍 모델과 애니메이션 모델이라는 두 가지 모델을 결합하여 수행됩니다.

개념 및 사용법

Web Animations API는 브라우저와 개발자가 DOM 요소의 애니메이션을 설명할 수 있는 공통 언어를 제공합니다. API의 개념과 사용 방법에 대한 자세한 내용은 Web Animations API 사용하기 (en-US) 문서를 참조하세요.

Animation (en-US): 애니메이션 노드 또는 소스에 대한 재생 컨트롤과 타임라인을 제공합니다. KeyframeEffect() (en-US) 생성자로 생성된 객체를 받을 수 있습니다.
KeyframeEffect (en-US): keyframes이라고 하는 애니메이션 가능한 속성과 값의 집합과 타이밍 옵션을 설명합니다. 그런 다음 Animation() (en-US) 생성자를 사용하여 재생할 수 있습니다.
AnimationTimeline (en-US): 애니메이션의 타임라인을 나타냅니다. 이 인터페이스는 DocumentTimeline (en-US) 및 향후 타임라인 객체에 상속되는 타임라인 기능을 정의하기 위해 존재하며, 개발자에 의해 직접 접근되지 않습니다.
AnimationEvent: 실제 CSS 애니메이션의 일부입니다.
DocumentTimeline (en-US): Document.timeline 속성을 사용하여 접근한 기본 문서 타임라인을 포함한 애니메이션 타임라인을 표시합니다.

Web Animations API는 document와 element (en-US)에 몇 가지 새로운 기능을 추가합니다.

document.timeline: 기본 문서 타임라인을 나타내는 DocumentTimeline 객체입니다.
document.getAnimations() (en-US): document의 요소에 현재 적용 중인 Animation (en-US) 객체 배열을 반환합니다.

Element.animate() (en-US): 요소에서 애니메이션을 생성하고 재생하는 메서드입니다. 생성된 Animation (en-US) 객체 인스턴스를 반환합니다.
Element.getAnimations() (en-US): 현재 요소의 영향을 미치고 있거나, 향후 영향을 미칠 예정인 Animation (en-US) 객체의 배열을 반환합니다.

Specification
Web Animations