animationstart event
Examples
When CSS animation starts playing Add as a <div> element listens for events:
var x = document.getElementById ( "myDIV");
// Chrome, Safari and Opera Codes
x.addEventListener ( "webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener ( "animationstart", myStartFunction);
// Chrome, Safari and Opera Codes
x.addEventListener ( "webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener ( "animationstart", myStartFunction);
try it"
Definition and Usage
animationstart event triggered when the CSS animation starts playing.
More about CSS animation, please see our CSS3 animation section.
CSS animation plays, the following three events occur:
- animationstart - CSS animation after the start trigger
- animationiteration - the CSS animations triggered repeat
- the animationEnd - after completion trigger the CSS
Browser Support
Figures in the table represent the first browser to support this version of events.
"Webkit" or "moz" after a specified number prefix number as the first version to support the event.
| event | |||||
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
Note: Chrome, Safari and Opera browsers webkitAnimationEnd prefix.
grammar
object.addEventListener ( "webkitAnimationStart", myScript) ; // Code for Chrome, Safari and Opera
object .addEventListener ( "animationstart", myScript ); // Standard syntax
object .addEventListener ( "animationstart", myScript ); // Standard syntax
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.
technical details
| Whether to support the bubble: | Yes |
|---|---|
| It can be canceled: | No |
| Event Type: | AnimationEvent |
Related Pages
CSS tutorial: CSS3 Animation
CSS Reference: CSS3 animation properties
HTML DOM Reference: Style animation properties
Event objects