CSS3 Animations support? - animation

Question

Anybody know where I can find a table of browsers and whether or not they support CSS3 animations and keyframes? Thanks

Answer 1

Can I Use is the place for all of this sort of thing, regularly updated, and always accurate!
http://caniuse.com/css-animation
They were implemented on these dates:
Safari 4.0: 11/06/2008
Chrome 1.0: 02/09/2008
Firefox 5: 20/04/2011
IE 10: 09/2011
They became part of the spec in 2009: http://www.w3.org/TR/css3-animations/
For more info, checkout http://css3.bradshawenterprises.com/support/ and http://css3.bradshawenterprises.com/animations/

Answer 2

I'm going this way. Instead of looking for the browser, I'm looking at feature detection. This nifty write-up will save me some work. So, I'm copying the code, you figure out what it all means :-).
/* Check if the Animation feature exists */
if(hasAnimation())
{
alert("Has!");
return;
}
function hasAnimation()
{
var elm = document.getElementById( 'imgDiv' )
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '';
if( elm.style.animationName === undefined )
{
var animation = false;
for( var i = 0; i < domPrefixes.length; i++ )
{
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined )
{
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
if( animation === false ) // animate in JavaScript fallback
return false;
}
/* Create animationstring */
elm.style[ animationstring ] = 'rotate 1s linear infinite';
var keyframes = '#' + keyframeprefix + 'keyframes rotate { '+
'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
'}';
/* Add rule to stylesheet */
if( document.styleSheets && document.styleSheets.length )
{
document.styleSheets[0].insertRule( keyframes, 0 );
return true;
}
/* If there is no stylesheet, add rule to header */
var s = document.createElement( 'style' );
s.innerHTML = keyframes;
document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
return true;
}
Update: I've rewritten the code for clarity. Also the 'elm' element wasn't defined. The original demo code is here.

Answer 3

EDIT: I apologize to everyone for recommending a W3Schools link, I will NEVER do it again.
W3Schools usually has these types of table and information, check out this link.
It looks like as of now, the following browsers support CSS animations:
Firefox
Chrome
Safari
And, the ones left, which don't currently support it are:
IE
Opera