CSS3 Animations

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) {
		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.

Tags: animation, CSS3, HTML5 Dev Center, HTML5 Tutorials & Articles
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.