Поддержка CSS3 анимации? - PullRequest
Новая
       11

Поддержка CSS3 анимации?

2 голосов
/ 25 января 2012

Кто-нибудь знает, где я могу найти таблицу браузеров и поддерживают ли они CSS3-анимацию и ключевые кадры?Спасибо

Ответы [ 3 ]

6 голосов
/ 25 января 2012

Можно ли использовать это место для всего этого, регулярно обновляемого и всегда точного!

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/

0 голосов
/ 22 января 2014

Я еду сюда . Вместо того, чтобы искать браузер, я смотрю на обнаружение функций. Эта изящная статья спасет меня от работы. Итак, я копирую код, вы выясните, что все это значит: -). 

/* 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;
}

Обновление: я переписал код для ясности. Также элемент «вяз» не был определен. Оригинальный демонстрационный код здесь .

0 голосов
/ 25 января 2012

РЕДАКТИРОВАТЬ: Я приношу извинения всем за рекомендацию ссылки W3Schools, я никогда не буду делать это снова.

W3Schools обычно имеет эти типы таблиц и информации, проверьте эту ссылку .

Похоже, что следующие браузеры поддерживают анимацию CSS:

  • Firefox
  • Chrome
  • Safari

И те, которые в настоящее время не поддерживают его, это:

  • IE
  • Opera
...