Support for CSS Animation

All modern browsers, and starting with IE10, you can begin using CSS Animation. Now is the time to start experimenting with it.

Great article on priniciples of animation (and using webkit).

Mozilla documentation for animation.

The spinning logo on the right was achieved with this code:

#spinningLogo {
	background-image:url(../img/PxIcon36x36.png);
	width:36px;
	height:36px;
	
	-webkit-animation-name: cssAnimation;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	
	-moz-animation-name: cssAnimation;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: linear;
	-moz-animation-delay: 0s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate;
	
	-o-animation-name: cssAnimation;
	-o-animation-duration: 10s;
	-o-animation-timing-function: linear;
	-o-animation-delay: 0s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:alternate;
	
	animation-name: cssAnimation;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count:infinite;
	animation-direction:alternate; 
}

@-webkit-keyframes cssAnimation {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes cssAnimation {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@-o-keyframes cssAnimation {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}
@keyframes cssAnimation {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

/* The HTML is just: */
<p id="spinningLogo" class="ir">Pixel Pro Logo</p>

For sure, that is a lot of code, but there are only about 12 lines that matter, the rest is vendor prefix material.

jQuery.animate()

If you need animation to work under IE, then the easiest solution might be jQuery.

Greensock

This is a long-time staple of AS3 (Flash) developers and it has been ported to JavaScript. I haven’t had a need to do any animation with Greensock, but should time time come that jQuery isn’t up to the task, I’ll be reaching for my sock drawer.