CSS3动画支持吗？

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