CSS3 动画支持？答案

【问题标题】：CSS3 Animations support?CSS3 动画支持？
【发布时间】：2014-01-22 19:43:31
【问题描述】：

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

【问题讨论】：

caniuse.com/css-animation
@BoltClock 添加为答案，我会接受。

标签： animation css

【解决方案1】：

Can I Use 是所有这类东西的地方，定期更新，而且总是准确的！

http://caniuse.com/css-animation

它们在这些日期实施：

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/

【讨论】：

【解决方案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.

【讨论】：

【解决方案3】：

编辑：对于推荐 W3Schools 链接，我向大家道歉，我再也不会这样做了。

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

目前看来，以下浏览器支持 CSS 动画：

火狐
铬
野生动物园

还有，目前不支持的还有：

IE
歌剧

【讨论】：

W3Schools 是一个糟糕的网站！通常不准确，并且经常过时。
@Rich Bradshaw: You may like (or have seen) this :P
嗯，很高兴知道。我想我从来没有对他们的信息有任何疑问。
我认为这通常是问题所在 - 他们所犯的错误/不准确之处通常很微妙但很严重。就像数学中的“规则”一样，当你乘以 10 时，你会添加一个 0。这有点对，但是当你需要做 3.2 x 10 时，被教导是没有用的。将人们指向 w3schools 并没有那么有用对他们来说是长期的。