检测CSS动画的支持 | CSS Animations: Detecting CSS animation support

CSS 动画 使仅用CSS属性来使内容呈现动画效果成为一种可能，然而，某些时候CSS动画属性并不能生效，此时，我们希望能够通过javascript代码来实现相似的动画效果。针对此种情况，本文基于Chris Heilmann的 this blog post 对该技术进行了示范。

CSS动画支持检测

下面的代码将检测CSS动画的支持性是否是有效的。

var animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '',
    elm = document.createElement('div');

if( elm.style.animationName !== undefined ) { animation = true; }    

if( 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;
    }
  }
}

首先先定义几个变量，并通过初始化animation 为false来假设不支持CSS动画属性，先设置animationstring变量为animation并在稍后进行修改。创建一个浏览器前缀的数组用来循环遍历并设置pfx前缀为空字符串。

然后，检测创建的elm元素的style属性集合中animation-name属性是否被设置，如果被设置，则意味着着浏览器支持CSS animation属性，而不需要加任何前缀，然而到目前，还没有任何浏览器实现（译者：chrome中试验了一下是可以的）；

如果浏览器不支持无前缀的animation，那么animation变量值仍为false，遍历所有可能的浏览器前缀，由于所有的主流浏览器现在都在该属性前加了前缀，因此在AnimationName 前加上前缀即可。

当代码执行完，如果浏览器不支持CSS animation属性，则返回animation 为false，否则为true。如果animation为true，则所有animation 相关属性名称以及keyframes属性前缀都是检测到的正确的，因此，如果使用firefox，属性名称就是MozAnimation，keyframes前缀就是-moz-，如果使用chrome，属性为WebkitAnimation ，keyframes前缀为 -webkit-。注意，浏览器是不方便在驼峰法和连字符法之间进行切换的。

针对不同浏览器使用正确语法实现动画效果

现在可以知道，无论浏览器是否支持CSS animation，均可以实现动画效果。

if( animation === false ) {

  // animate in JavaScript fallback

} else {
  elm.style[ animationstring ] = 'rotate 1s linear infinite';

  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
                  '}';

  if( document.styleSheets && document.styleSheets.length ) {

      document.styleSheets[0].insertRule( keyframes, 0 );

  } else {

    var s = document.createElement( 'style' );
    s.innerHTML = keyframes;
    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );

  }
  
}

以上代码主要根据animation的值来进行不同的操作，如果为false,则需要执行javascript脚本来实现动画效果，否则，就用javascript来创建所需要的CSS animation 效果。

设置animation属性是很简单的，可以在style属性集合中简单的更新它的值。然而，增加keyframes是有难度的，由于它们不能够通过传统的css语法来定义。（虽然这样使得它们更加灵活，但是通过脚本来定义更加不易）

使用javascript来定义keyframes，需要将其具体语法写为字符串。为了创建keyframes变量，在构建keyframes时要在其所有属性前加前缀，该变量包含完整的所有动画序列所需要的keyframes描述。

下一个任务是将创建的keyframes添加到实际的CSS中。首先要检查是否在document中存在CSStylesheet，如果存在，则能够简单的将keyframes值插入到CSSstylesheet中。

如果不存在CSSstylesheet，创建一个新的 <style>元素，并将keyframes设置为其内容。然后将新的<style>元素插入到document 的head中，从而将新的style sheet添加到了html文档中。

在JSFiddle中查看

另见

• CSS动画（CSS animation）