animationstart 이벤트
정의와 사용법
CSS 애니메이션이 시작될 때, animationstart 이벤트가 발생합니다.
CSS 애니메이션에 대한 더 많은 지식을 원하시면, 우리의 강의를 공부해 보세요 CSS3 애니메이션 강의。
CSS 애니메이션을 재생할 때, 세 가지 이벤트가 발생할 수 있습니다：
- animationstart - CSS 애니메이션이 시작될 때 발생
- animationiteration - CSS 애니메이션이 반복될 때 발생
- animationend - CSS 애니메이션이 완료될 때 발생
예제
CSS 애니메이션 시작될 때, <div> 요소에 대해 일어나는 일을 설정하세요：
var x = document.getElementById("myDIV");
// Chrome, Safari 및 Opera용 코드
x.addEventListener("webkitAnimationStart", myStartFunction);
// 표준 문법
x.addEventListener("animationstart", myStartFunction);
문법
object.addEventListener("webkitAnimationStart", myScript); // Chrome, Safari 및 Opera용 코드
object.addEventListener("animationstart", myScript); // 표준 문법
주석：Internet Explorer 8 이전 버전은 지원하지 않습니다 addEventListener() 메서드。
기술 세부 사항
| 버블링： | 지원 |
|---|---|
| 취소 가능： | 지원하지 않음 |
| 이벤트 유형： | AnimationEvent |
| DOM 버전： | Level 3 Events |
브라우저 지원
표의 숫자는 이 이벤트를 완전히 지원하는 최초 브라우저 버전을 나타냅니다.
숫자 뒤의 "webkit" 또는 "moz"는 사용할 프리픽스의 최초 버전을 나타냅니다.
| 이벤트 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
주석：Chrome, Safari 및 Opera에서는 webkitAnimationEnd를 사용하십시오.
