This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
AnimationEvent 인터페이스는 에니메이션과 관련된 정보를 제공하는 이벤트를 나타냅니다.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/AnimationEvent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">AnimationEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
생성자
AnimationEvent()- 주어진 매개변수로
AnimationEvent를 생성합니다.
속성
Event의 속성을 상속합니다.
AnimationEvent.animationNameRead only- 트랜지션과 관련된
animation-nameCSS 속성의 값을 가진DOMString입니다. AnimationEvent.elapsedTimeRead only- 애니메이션이 재생된 총 시간을 나타내는 실수입니다. 초 단위로, 애니메이션이 일시정지된 시간은 제외합니다.
animationstart이벤트의elapsedTime은0.0이지만,animation-delay값이 음수였다면 대신(-1 * delay)를 값으로 가집니다. AnimationEvent.pseudoElementRead only- 애니메이션이 재생 중인 의사 요소의 이름을 값으로 가진
DOMString입니다.'::'으로 시작합니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열''을 반환합니다.
메서드
Event의 메서드를 상속합니다.
AnimationEvent.initAnimationEvent()- 삭제 예정 메서드
Document.createEvent("AnimationEvent")를 사용해AnimationEvent를 초기화합니다.
명세
| Specification | Status | Comment |
|---|---|---|
| CSS Animations The definition of 'AnimationEvent' in that specification. |
Working Draft | Initial definition. |
브라우저 호환성
BCD tables only load in the browser