CSS3 Animations

This article is a number of years old, and all major web browsers now support CSS3 Animations. Please remove any vendor prefixes. Additionally, up-to-date information is available on MDN.

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.

Posted in CSS,Developing,Technology,Web browsers |

25 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>