js 控制 css3高级运动 keyframes

本文转载自查看原文 2016-10-07 23:32 2836

 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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js如何衔接css3的多个@keyframes动画？用js控制css动画效果@keyframes CSS3 @keyframes 规则 CSS3 @keyframes 规则 CSS3的@keyframes用法详解 CSS3 @keyframes的用法介绍 Css3动画-@keyframes与animation css3中的@keyframes的使用 CSS3动画@keyframes基础 CSS3 @keyframes 用法（简单动画实现）