2016y8m15d

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>动画帧</title>
 6     <style type="text/css">
 7     .box{
 8         width:100px;
 9         height:100px;
10         background:red; 
11         animation-name:fromLeftToRight;
12         animation-duration:5s;
13         /* 播放次数 （无限循环） */
14         -webkit-animation-iteration-count:infinite;
15          float:right; 
16         /* 浮动可以设置开始位置 */
17     }
18     /* 定义动画 */
19     @keyframes fromLeftToRight{
20         from{
21             /* 设置开始位置 */
22             margin-right:0;
23         }
24         to{
25             margin-right:1024px;
26             transform:rotate(720deg);
27         }
28     }
29     /* box:hover{
30         -webkit-animation-play-state:paused
31     } */
32     .two-box{
33         width:200px;
34         height:200px;
35         background:blue;
36         animation-name:fromLeft;
37         animation-duration:5s;
38         /* 设置动画延迟的时间 */
39         -webkit-animation-delay :2s;
40         /* 速度  减慢效果*/
41         animation-timing-fuction:ease-out;
42         /* 设置动画的次数 */
43         -webkit-animation-iteration-count:5;
44         /* float:left;
45         margin-top:20px; */
46 
47     }
48     @keyframes fromLeft{
49         from{
50             margin-left:0;
51         }
52         to{
53             margin-left:1024px;
54             transform:rotate(720deg);
55         }
56     }
57     </style>
58 </head>
59 <body>
60     <div class="box">
61         <p>自定义动画</p>
62         <p>根本停不下来</p>
63     </div>
64     <br><br>
65     <div class="two-box">
66         <h1>自定义动画滚动1</h1>
67         <h2>自定义动画滚动2 animate.css</h2>
68     </div>
69 </body>
70 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box{
 8             width:100px;
 9             height:100px;
10             background:blue;
11             margin:2px;
12             animation-name:fromLeftToRight;
13             animation-duration:3s;
14             animation-iteration-count:infinite;
15         }
16         
17     .reverse{
18         -webkit-animation-direction:reverse;
19         background:red;
20     }
21     .alternate{
22         animation-direction:alternate;
23         background:lightgreen;
24     }
25     .alternate-reverse{
26         animation-direction:alternate-reverse;
27         background:yellow;
28     }
29     @keyframes fromLeftToRight{
30         from{
31             margin-left:0;
32         }
33         to{
34             margin-left:1024px;
35             transform:rotate(1080deg); 
36     }
37     </style>
38 </head>
39 <body>
40     <div class="box"></div>
41     <div class="box reverse"></div>
42     <div class="box alternate"></div>
43     <div class="box alternate-reverse"></div>
44 </body>
45 </html>