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; width:100px; height:100px; margin:50px auto;"></div> 39 </body> 40 </html>
