CSS3 Animations

Published on Thursday, May 6, 2010

I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations (CSS Animations Module Level 3 specification).

What are CSS Animations?

CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes.

A simple example

Let’s take a look at the code for a simple CSS3 Animations example:

.animation-container {
	-webkit-animation-name: movearound;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes movearound {
	from {
		width: 200px;
		background: #f00;
		opacity: 0.5;
		-webkit-transform: scale(0.5) rotate(15deg);
	}
	to {
		width: 400px;
		background: #ffffa2;
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}

There are a number of new things we see above. First, the .animation-container element has a few CSS properties defining the name of the animation (I’ll get back to that), how long it should take to complete, how many times it should perform the entire animation (keyword infinite used here), the direction of it and the easing-function.

The most interesting part here is the animation name, which is, contrary to what you might believe, any name of your choosing. This name is then referenced in the new part using the @ character (and vendor-prefix) to specify a keyframes section. Within here you can set the starting CSS property values for the element in the animation, and the ending ones.

In this example, the element will rotate to being straight, fade in and become twice as wide at the end of the animation.

Using keyframe values and iteration-count

In another example, we will use a shorthand syntax, keyframe values for a specific amount into the animation and a set iteration count. The code for the CSS3 Animation example with percentage looks like this:

.animation-container {
	height: 60px;
	padding: 10px;
	/* Shorthand syntax */
	-webkit-animation: movearound 4s ease 3 normal;
}

@-webkit-keyframes movearound {
	0% {
		width: 200px;
		background: #f00;
		opacity: 0.5;
		-webkit-transform: scale(0.5) rotate(15deg);
	}
	30% {
		width: 300px;
		background: #f00;
		opacity: 1;
		-webkit-transform: scale(1.3) rotate(15deg);
	}
	60% {
		width: 100px;
		background: #00f;
		opacity: 0.3;
		-webkit-transform: scale(0.3) rotate(15deg);
	}
	100% {
		width: 400px;
		background: #ffffa2;
		opacity: 0.5;
		-webkit-transform: scale(1) rotate(0deg);
	}
}

First, we see the easy-to-use shorthand syntax for the animation property where the name, duration, easing method, number of iterations and direction is specified all in one line. Then, in the keyframes section, you can see a number of percentage values, whichever you want to use, that will set the CSS properties for the element when that much percentage of the animation has taken place.

In this example, the element starts small, scales big, then smaller than when it started and then ends with a normal size. It’s also complemented by some rotating and background color shifting.

More advanced example

If you want something more advanced than this, i recommend looking at the WebKit team’s falling leaves example where a mixture of mainly CSS Animations and JavaScript creates a nice example.

The CSS3 test suite

Above tests (except for the leaves) and a number of other CSS3 examples are available in my CSS3 test ground, where I also try to find alternate solutions to make some the things work in IE as well.

Web browser support

CSS Animations are only available in WebKit-based web browsers, mainly meaning Google Chrome and Safari. From what I have heard, I have no indication that any other web browser vendor is working on this. However, since everyone but Microsoft have decided to implement CSS Transitions, this seems like the next logical step.

I usually only blog about things available in most web browsers, but I believe this native animation approach will be very good from a performance-perspective (especially on mobile devices and iPad and other tablet computers) and also very easy to create, so it is something well worth considering.

69 Comments/Reactions

#1 Lars Gunther
May 6th, 2010 at 19:17

Meanwhile I have discussed CSS animations with the CSS WG and I have a counter proposal.
#2 Robert Nyman - author
May 6th, 2010 at 20:28

Lars,

It’s a valid point, and I like your suggestions. With all the wheels in motion, though, and CSS Transitions already in WebKit, Opera and soon Firefox, I think it’s perhaps too late to expect any changes.
#3 Lars Gunther
May 7th, 2010 at 1:08

To be clear, I do think simple transitions should be in CSS. Animations with keyframes and a whole slew of other settings is a different feature, IMO.

At the very least, I think the DOM community should discuss this with the CSS WG. They are having discussions about syntax, but neglect the use cases. Those should come first.
#4 Robert Nyman - author
May 7th, 2010 at 9:58

Lars,

I don’t know if there have been one already within the group, but I agree that there should be one.
#5 Jordan Moore
May 13th, 2010 at 17:51

CSS animations work in Minefield – Firefox 3.7a (isn’t that now becoming FF4.0? Anyway…). They work with the -moz- prefix so hopefully we will be seeing some sort of standardisation between the two vendors.
#6 Robert Nyman - author
May 13th, 2010 at 21:40

Jordan,

No, that’s CSS Transitions, not animations. Not sure if Mozilla will ever support the keyframe approach.
#7 Tim Aidlin
July 7th, 2010 at 1:44

Hi, and thanks for the good article. I’m not sure I’m 100% on-board, however with the blurring of the “display layer” of CSS and the “interaction” layer, which is often JavaScript of some variant.

I’m a strong-believer in separation between the content, visuals, and interactions in a progressive-enhancement / graceful-degradation sort-of-way.

I can see where some simple CSS animations would be useful, however, especially in the case of simple sites that would have no other need for JavaScript.

So, yes, conflicted. What are your thoughts?
#8 Constantine Vesna
July 15th, 2010 at 11:42

Lars kinda stole the show, as he posted every concern i (and many other people) have.
CSS Animations Module are not fitting the ideology of CSS. At all.
You should not describe the core behaviour of your site, with mere style.
Would be much better if the module will be transformed into something like html5 canvas (which is also a webkit team invetion, btw).
#9 Robert Nyman - author
August 15th, 2010 at 22:04

Tim, Constantine,

I agree, there have been numerous discussions about whether this belongs in CSS or not. It’s hard to say, though, because some of it is not interaction either, and doesn’t always fit in javaScript either, but is rather an example of richer style/visual presentation.

So, basically, my stance towards it varies from day to day.