CSS3动画支持？

Question

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

Answer 1

我可以使用是所有这种事情，定期更新的地方，总是准确的！

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/

欲了解更多信息，结账​​和http://css3.bradshawenterprises.com/animations/

Answer 2

编辑：我很抱歉给大家推荐一个W3Schools链接，我永远不会再做。

---

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

它看起来像截至目前，以下浏览器支持CSS动画：

• 火狐
• 铬
• Safari浏览器

而且，离开了孩子，就是目前没有支持它是：

• IE
• 歌剧

Answer 3

我要去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。