Question

有人知道我在哪里可以找到浏览器表以及它们是否支持CSS3动画和关键帧？感谢

Answer 1

我可以使用这个所有这类东西的地方，定期更新，并且始终准确！

他们是在这些日期实施的：

Safari 4.0: 11/06/2008
Chrome 1.0: 02/09/2008
Firefox 5: 20/04/2011
IE 10: 09/2011

他们在2009年成为规范的一部分：http://www.w3.org/TR/css3-animations/

有关详细信息，请结帐http://css3.bradshawenterprises.com/support/和http://css3.bradshawenterprises.com/animations/

Answer 2

我要去this way。而不是寻找浏览器，我正在寻找功能检测。这篇精彩的文章将为我节省一些工作。所以，我正在复制代码，你弄清楚这一切意味着什么： - ）。

/* 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;
}

更新：为了清晰起见，我重写了代码。 'elm'元素也没有定义。原始演示代码is here。

Answer 3

编辑：我向所有人推荐W3Schools链接道歉，我绝不会再这样做。

W3Schools通常有这些类型的表格和信息，请查看link。

截至目前，以下浏览器支持CSS动画：

火狐
铬
Safari浏览器

而且，剩下的，目前不支持它的是：

IE
戏

CSS3动画支持？

3 个答案: