How to use animations

As of September 2011, this works in all Webkit browsers, Firefox 5+ and IE10

CSS animations were introduced into Webkit in 2007, and added to Firefox by David Barron in 2011.

In 2009 a working draft was written and added to the w3c site.

To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.

Demo

Code

The interesting bit of this code is this bit of CSS (remember to add vendor prefixes):

@keyframes resize {
	0% {
		padding: 0;
	}
	50% {
		padding: 0 20px;
		background-color:rgba(255,0,0,0.2);		
	}
	100% {
		padding: 0 100px;
		background-color:rgba(255,0,0,0.9);
	}
}
	
#box {
	animation-name: resize;
	animation-duration: 1s;
	animation-iteration-count: 4;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}	

Note that the 4 iterations makes the box pulse twice - the animation runs forwards then backwards, then forwards then backwards.

You can have as many keyframes as you like, at whatever intervals you like.

A useful setting is to set animation-iteration-count to infinite, making the animation continue for ever.

Demo

The key to using these animations is subtlety - nice delicate animations, rather than extreme over the top ones! It's also worth noting that the WCAG (Web Content Accessibility Guidelines) 2.0 specifies that a website shouldn't contain things that flash more than 3 times a second to avoid causing seizures in people susceptible to them.