AnimationEvent

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.animationName Read only: 트랜지션과 관련된 animation-name CSS 속성의 값을 가진 DOMString입니다.
AnimationEvent.elapsedTime Read only: 애니메이션이 재생된 총 시간을 나타내는 실수입니다. 초 단위로, 애니메이션이 일시정지된 시간은 제외합니다. animationstart 이벤트의 elapsedTime은 0.0이지만, animation-delay 값이 음수였다면 대신 (-1 * delay)를 값으로 가집니다.
AnimationEvent.pseudoElement Read 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.

브라우저 호환성

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`AnimationEvent` Experimental	Chrome Full support 43 Full support 43 No support 1 — 70 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 30 Full support 30 No support 15 — 57 Prefixed Prefixed Implemented with the vendor prefix: WebKit No support 12.1 — 15 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: o	Safari Full support 9.1 Full support 9.1 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: WebKit	WebView Android Full support 43 Full support 43 No support 1 — 70 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Chrome Android Full support 43 Full support 43 No support 18 — 70 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Firefox Android Full support 6	Opera Android Full support 30 Full support 30 No support 14 — 49 Prefixed Prefixed Implemented with the vendor prefix: WebKit No support 12.1 — 14 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: o	Safari iOS Full support 9.3 Full support 9.3 Full support 3.2 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Samsung Internet Android Full support 4.0 Full support 4.0 No support 1.0 — 10.0 Prefixed Prefixed Implemented with the vendor prefix: WebKit
`AnimationEvent()` constructor Experimental	Chrome Full support 43	Edge Full support ≤79	Firefox Full support 23	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 23	Opera Android No support No	Safari iOS ?	Samsung Internet Android Full support 4.0
`animationName` Experimental	Chrome Full support 43	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 30	Safari Full support 9	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 6	Opera Android Full support 30	Safari iOS Full support 9	Samsung Internet Android Full support 4.0
`elapsedTime` Experimental	Chrome Full support 43	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 30	Safari Full support 9	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 6	Opera Android Full support 30	Safari iOS Full support 9	Samsung Internet Android Full support 4.0
`initAnimationEvent` ExperimentalDeprecatedNon-standard	Chrome No support 1 — 18 Alternate Name No support 1 — 18 Alternate Name Alternate Name Uses the non-standard name: `initWebKitAnimationEvent`	Edge No support 12 — 16	Firefox No support 6 — 23	IE Full support 10	Opera No support 12.1 — 15	Safari No support 4 — 6 Alternate Name No support 4 — 6 Alternate Name Alternate Name Uses the non-standard name: `initWebKitAnimationEvent`	WebView Android No support No	Chrome Android No support No	Firefox Android No support 6 — 23	Opera Android No support 12.1 — 14	Safari iOS No support 3.2 — 6 Alternate Name No support 3.2 — 6 Alternate Name Alternate Name Uses the non-standard name: `initWebKitAnimationEvent`	Samsung Internet Android No support No
`pseudoElement` Experimental	Chrome Full support 68	Edge Full support 79	Firefox Full support 23	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 68	Chrome Android Full support 68	Firefox Android Full support 23	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 10.0

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.: Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.
Uses a non-standard name.: Uses a non-standard name.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

같이 보기

CSS 애니메이션 사용하기
애니메이션 관련 CSS 속성과 @-규칙: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes.

생성자

속성

메서드

명세

브라우저 호환성

Legend

같이 보기

Learn the best of web development