<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var arr=[-45,60,-75,90]; var i=0; box.onclick=function(){ var ready=false; i++; var oH=document.getElementsByTagName('head')[0]; var oS=document.createElement('style'); oH.appendChild(oS); oS.innerHTML= '@keyframes rotate{'+ '0%{'+ 'transform: rotate('+arr[i%4]+'deg);'+ '}'+ '100%{'+ 'transform: rotate(-'+arr[i%4]+'deg);'+ '}'+ '}'; box.style.animation='1s rotate linear'; box.addEventListener('animationend',function(){ if(ready)return; ready=true; document.getElementsByTagName('head')[0].removeChild(oS); },false); console.log(oS.innerHTML); }; }; </script> </head> <body> <div id="box" style="background:red; 100px; height:100px; margin:50px auto;"></div> </body> </html>