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/support/和http://css3.bradshawenterprises.com/animations/

Answer 2

我要這樣走 。 我正在尋找功能檢測，而不是尋找瀏覽器。 這個漂亮的文章將為我節省一些工作。 所以，我在復制代碼，您知道這意味着什么:-)。

/* 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'元素。 原始的演示代碼在這里 。

Answer 3

編輯：我向每個人推薦W3Schools鏈接表示歉意，我再也不會做。

---

W3Schools通常具有這些類型的表和信息，請查看此鏈接 。

截至目前，以下瀏覽器支持CSS動畫：

• 火狐
• 鉻
• 蘋果瀏覽器

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

• IE
• 歌劇