js 控制 css3高级运动 keyframes

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7             window.onload=function(){
 8                 var arr=[-45,60,-75,90];
 9                 var i=0;
10                 box.onclick=function(){
11                 var ready=false;
12                 i++;
13                 var oH=document.getElementsByTagName('head')[0];
14                 var oS=document.createElement('style');
15                 oH.appendChild(oS);
16                   oS.innerHTML=
17                     '@keyframes rotate{'+
18                     '0%{'+
19                     'transform: rotate('+arr[i%4]+'deg);'+
20                     '}'+
21                     '100%{'+
22                     'transform: rotate(-'+arr[i%4]+'deg);'+
23                     '}'+
24                     '}';
25                 box.style.animation='1s rotate linear';    
26                 box.addEventListener('animationend',function(){
27                     if(ready)return;
28                     ready=true;
29                     document.getElementsByTagName('head')[0].removeChild(oS);
30                 },false);
31                 console.log(oS.innerHTML);
32                 };
33 
34             };
35     </script>
36 </head>
37 <body>
38     <div id="box" style="background:red; 100px; height:100px; margin:50px auto;"></div>
39 </body>
40 </html>
原文地址:https://www.cnblogs.com/lixuekui/p/5937128.html