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>
时间： 2024-11-16 04:39:02