CSS3動畫支持？

有人知道我在哪裏可以找到瀏覽器的表格，以及他們是否支持CSS3動畫和關鍵幀？謝謝CSS3動畫支持？

來源

2012-01-24 henryaaron

http://caniuse.com/css-animation – BoltClock

不錯。謝謝。門將。 –

@BoltClock添加爲答案，我會接受。 – henryaaron

我可以使用是所有這種事情，定期更新的地方，總是準確的！

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/

來源

2012-01-24 21:09:39

-2

編輯：我很抱歉給大家推薦一個W3Schools鏈接，我永遠不會再做。

W3Schools的通常有這些類型的表和信息，看看這個link。

它看起來像截至目前，以下瀏覽器支持CSS動畫：

火狐
鉻
Safari瀏覽器

而且，離開了孩子，就是目前沒有支持它是：

IE
歌劇

來源

2012-01-24 21:07:23 jbranchaud

W3Schools是一個可怕的網站！通常不準確，並且經常過時。 –

@Rich Bradshaw：[你可能喜歡（或見過）]（http://meta.stackexchange.com/questions/120025/will-i-be-downvoted-for-giving-a-w3schools-link）： P – BoltClock

嗯，很高興知道。我想我從來沒有與他們的信息有任何問題。 – jbranchaud

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

來源

2014-01-22 11:04:18

CSS3動畫支持？

回答

相關問題