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アニメーションをサポートするように見えます：現在ない

• Firefoxの
• クローム
が
• サファリ

そして、左のもの、それをサポートしています：

• IE
• オペラ

Answer 3

I '行くつもり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。