β

如何通过脚本修改CSS3动画的keyframe

F2ES.COMF2ES.COM 10611 阅读

我们在使用CSS动画的时候,会遇到一个问题,如何用脚本修改animation对应的keyframe。(本文代码以webkit内核浏览器为准)

比如有这么一个例子,代码来自你需要知道的CSS3 动画技术

#rotate {
 margin: 0 auto;
 width: 600px;
 height: 400px; 
 /* 确保我们是在一个 3-D 空间 */
 -webkit-transform-style: preserve-3d;
 /*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
 -webkit-animation-name: x-spin;
 -webkit-animation-duration: 7s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear; 
}
 /* 定义要调用的动画 */
@-webkit-keyframes x-spin { 
% { -webkit-transform: rotateX(0deg); } 
% { -webkit-transform: rotateX(180deg); }
% { -webkit-transform: rotateX(360deg); } 
}

那么,脚本如何能访问到这个webkit-keyframes呢?

Safari Developer library上有一篇WebkitCSSKeyFramesRule相关的文章,通过文章我们可以了解到支持CSS3 animation的浏览器中存在一个叫做WebKitCSSKeyframesRule 的构造器,用于构造keyFrames对象,而且有三个方法可以操作keyframes:

上面三个方法的参数和对象字面量key/value式的操作类似,key可以是’0%’或者’from’这类的字符串,value则是对应的规则

接下来的问题就是如何获取keyframes对象了。在上一篇文章DOM元素属性review中,我们了解到document下面有一个styleSheets属性,用于展示文档中的所有样式对象,或许可以从这里找到思路。

打开webkit.org中一个CSS3 动画的demo,地址:http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

打开控制台,输入document.styleSheets,我们可以看到

Tadwj 如何通过脚本修改CSS3动画的keyframe

Great,我们找到了我们所需要的keyframes对象,而且展开这个对象,你会发现你可以很轻易地访问这个对象的cssRule。

nzHy4 如何通过脚本修改CSS3动画的keyframe

这个时候我们可以通过addRule,deleteRule和findRule对keyframes对象进行操作

s4JgA 如何通过脚本修改CSS3动画的keyframe

我们可以通过一个通用的方法来获取到某个样式表下所有的keyframes对象

var getKeyFramse = function(index){
  var styleSheet = document.styleSheets[index], keyframesRule = [];
  [].slice.call(styleSheet.cssRules).forEach(function(item){
    if (item.type === CSSRule.WEBKIT_KEYFRAMES_RULE) {
      keyframesRule.push( item );
    }
  })
  return keyframesRule;
}

参考资料

作者:F2ES.COMF2ES.COM
保持学习的心态
原文地址:如何通过脚本修改CSS3动画的keyframe, 感谢原作者分享。

发表评论