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