CSS3 Animation and the JavaScript API

I previously wrote about CSS3 Animation Events in June 2012 but the browsers have moved on and it makes sense to revisit the topic as part of this series.

While CSS3 animations provide reasonable control, it’s often necessary to add interaction or define a specific sequence of keyframe sets which play one after the other. For example, you could implement Dragon’s Lair in CSS3; an animation is played in response to the user’s keyboard or joystick movement.

Event Types

There are three types of event you can capture on an animated element:

• animationstart — fires when an animation starts for the first time
• animationiteration — fires at the start of every iteration (except for the first one)
• animationend — fires when the animation is complete (assuming it ever does).

Cross-Browser Compatibility

The three event types are supported by Firefox, IE10 and Opera 12.

Unfortunately, Chrome, Safari and Opera 15+ still require a webkit prefix and throw in camelCasing to make your life a little more difficult: webkitAnimationStart, webkitAnimationIteration and webkitAnimationEnd.

Therefore, you must currently define event listeners for both sets of browsers:

// animated element
var anim = document.getElementById("myelement");

// webkit events
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);

// standard events
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener);

The Event Object

In the code above, the AnimationListener function is called whenever an animation event occurs. An event object is passed as a single argument. As well as the standard properties and methods, it also provides:

• animationName: the CSS3 animation @keyframes name
• elapsedTime: the time in seconds since the animation started.

The same property names are available in all browsers.

We can therefore react accordingly, e.g. when the ‘flash’ @keyframes animation ends on #myelement:

function AnimationListener(e) {
	var
		t = e.target,
		name = e.animationName,
		end = (e.type.toLowerCase().indexOf("animationend") >= 0);
		
	if (end && name == "flash" && t.id == "myelement") {
		// do something
	}
}

View the CSS3 Animation Events demonstration…

The demonstration page displays a button. When clicked, an “enable” class is toggled which starts an animation @keyframes named “flash”. The animation name, type and elapsed time is displayed in a console when an animation event fires. Once the animation ends, the “enable” class is removed from the button so it can be clicked again.

If you’ve followed this series, you should know everything about CSS3 transitions and animations. Please post links to your demonstrations in the comments below.