这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
The AnimationEvent() constructor returns a newly created AnimationEvent, representing an event in relation with an animation.
语法
animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
                                           elapsedTime  : aFloat,
                                           pseudoElement: aPseudoElementName});
参数
The AnimationEvent() constructor also inherits arguments from Event().
- type
- A DOMString代表AnimationEvent类型的名称。大小写敏感,有三个值可选:'animationstart','animationend', 和'animationiteration'。
- animationName可选
- A DOMStringcontaining the value of theanimation-nameCSS property associated with the transition. It defaults to"".
- elapsedTime可选
- A floatgiving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an"animationstart"event,elapsedTimeis0.0unless there was a negative value foranimation-delay, in which case the event will be fired withelapsedTimecontaining(-1 *delay). It defaults to0.0.
- pseudoElement可选
- Is a DOMString, starting with"::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string:"".It defaults to"".
标准
| Specification | Status | Comment | 
|---|---|---|
| CSS Animations AnimationEvent() | Working Draft | Initial definition. | 
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | 
|---|---|---|---|---|---|
| Basic support | 43.0 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 | 
| pseudoElement | 未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 | 
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android | 
|---|---|---|---|---|---|---|
| Basic support | 未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 | 43.0 | 
| pseudoElement | 未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 | 未实现 | 
参考
- Using CSS animations
- Animation-related CSS properties and at-rules: animation,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,@keyframes
- The AnimationEventinterface it belongs to.