MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

检测CSS动画的支持性

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中查看

更多

文档标签和贡献者

 此页面的贡献者: zhengxinxin, luhai.cui@gmail.com
 最后编辑者: zhengxinxin,