CSS3的动画在JavaScript中的控制

CSS3的animation使用keyframes的表达式在样式表中的格式比较奇怪，以前的文章中我有介绍过如何操作样式表，但是这么奇怪的样式在样式表中又是如何对象化的呢？如果我们能找到keyframes在样式表中的对象化接口就完全可以用JavaScript来控制它！ 
一个keyframes的定义是由两层大括号组成的，比如  @keyframes test {
  0% {color:red;}
  100% {color:blue;}
} keyframes之所以是复数形式就是因为它里面还包含很多子样式，这些子样式可以称为keyframe。在Chrome控制台的代码提示中可以找到这个。 
 
这意味着keyframe和keyframes都存在对象化接口，然后我们顺着  styleSheet的操作方式 去摸索就可以找到这两个对象的实例。并且可以对其做，创建、删除、修改，等操作。普通的CSS样式是从sheet直接到rule，rule就包含选择器和样式了。而这两个对象是从sheet到keyframes再到keyframe。keyframe就相当于普通CSS样式的rule，它没有选择器部分，只包含一个百分比值和一个组样式。而keyframes是容纳keyframe的容器，它没有选择器和样式，但是有一个name属性，比如上面的样式中keyframes的name属性就为test，这个属性用于在animation中调用的。我就不做太多文字介绍，看下面的演示和相关的注释更容易明白～ 
<script>
onload=function(){
  var token,style,sheet,rule,test;
  //创建style对象，并获取关联的sheet对象
  style=document.createElement("style");
  document.head.appendChild(style);
  sheet=style.sheet;
  //创建一个名为test的keyframe（webkit需要前缀）
  var token=window.WebKitCSSKeyframesRule?"-webkit-":"";
  sheet.insertRule("@"+token+"keyframes test {}",0);
  test=sheet.cssRules[0];
  //循环生成每一帧，并添加进test中
  for(var i=0;i<=100;i++){
    //计算玫瑰曲线路径 r=sin(5θ)
    var θ=Math.PI*2*i/100,
        r=Math.sin(5*θ)*100,
        x=Math.sin(θ)*r|0,
        y=Math.cos(θ)*r|0;
    //创建帧（方法有浏览器差异）
    (test.insertRule||test.appendRule).call(test,i+"% {}");
    //设置帧样式
    test.cssRules[i].style.transform=
    test.cssRules[i].style.WebkitTransform=
      "translateX("+x+"px) translateY("+y+"px)";
  };
  //生成一组元素，每个间隔20ms
  for(var l=50,i=0;i<l;i++)setTimeout(function(){
    //创建div并添加基本样式
    var div=document.createElement("div");
    document.body.appendChild(div);
    div.style.width="20px";
    div.style.height="20px"
    div.style.position="absolute";
    div.style.top="120px";
    div.style.left="120px";
    div.style.background="#000";
    div.style.opacity=(1-this/l)*0.3; //透明度逐渐降低
    div.style.borderRadius="10px";
    //让div播放test这个动画
    div.style.animation=
    div.style.WebkitAnimation=
      "test 10s linear infinite";
  }.bind(i),i*20);
};
</script>

 

原文：   http://www.web-tinker.com/article/20344.html