Easy Tutorial
❮ Jsref Regexp Octal Jsref Regexp Whitespace ❯

animationstart Event

Event Object

Example

Add an event listener to a <div> element when a CSS animation starts playing:

var x = document.getElementById("myDIV");

// Chrome, Safari and Opera code
x.addEventListener("webkitAnimationStart", myStartFunction);

// Standard syntax
x.addEventListener("animationstart", myStartFunction);

Definition and Usage

The animationstart event is fired when a CSS animation starts playing.

For more information about CSS animations, see our CSS3 Animations section.

During a CSS animation, the following three events occur:


Browser Support

The numbers in the table specify the first browser version that supports the event.

Numbers specified after "webkit" or "moz" indicate the first version with prefix support.

Event
animationstart 4.0 webkit 10.0 16.0 <br>5.0 moz 4.0 webkit 15.0 webkit <br>12.1

Note: Chrome, Safari, and Opera use the webkitAnimationEnd prefix.


Syntax

object.addEventListener("webkitAnimationStart", myScript);  // Chrome, Safari and Opera syntax
object.addEventListener("animationstart", myScript);        // Standard syntax

Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.


Bubbles: Yes
Cancelable: No
--- ---
Event Type: AnimationEvent
--- ---

Related Pages

CSS Tutorial: CSS3 Animations

CSS Reference: CSS3 Animation Properties

HTML DOM Reference: Style Animation Properties

❮ Jsref Regexp Octal Jsref Regexp Whitespace ❯