# animationstart Event

Event Object

## Example

Do something with a <div> element when a CSS animation has started:

var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Try it yourself »

## Definition and Usage

The animationstart event occurs when a CSS animation has started to play.

For more information about CSS Animations, see our tutorial on CSS3 Animations.

When a CSS animation plays, there are three events that can occur:

- animationstart - occurs when the CSS animation has started
- animationiteration - occurs when the CSS animation is repeated
- animationend - occurs when the CSS animation has completed

## Browser Support

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

Numbers followed by "webkit" or "moz" specify the first version that worked with a prefix.

Event |  |  |  |  |
--- | --- | --- | --- | --- | ---
animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1

Note: For Chrome, Safari and Opera, use the webkitAnimationStart prefix.

## Syntax

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

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

## Technical Details

Bubbles: | Yes
Cancelable: | No
Event type: | AnimationEvent
DOM Version: | Level 3 Events

## Related Pages

CSS Tutorial: CSS3 Animations

CSS Reference: CSS3 animation Property

HTML DOM reference: Style animation Property

Event Object

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples