1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>动画</title>
6 <style>
7 div{
8 position: relative;
9 width: 100px;
10 height: 100px;
11 background: orange;
12 animation:anima 5s infinite alternate; //设置动画名为anima
13 -webkit-animation:anima 5s infinite alternate;
14 }
15 @keyframes anima{ //keyframes关键帧
16 0%{
17 background: orange; top:0px;left: 0px;
18 }
19 25%{
20 background: red; top:0px;left: 400px;
21 }
22 50%{
23 background: green; top:400px;left: 400px;
24 }
25 75%{
26 background: yellow; top:400px;left: 0px;
27 }
28 100%{
29 background: pink; top:0px;left: 0px;
30 }
31 }
32 @-webkit-keyframes anima{
33 0%{
34 background: orange; top:0px;left: 0px;
35 }
36 25%{
37 background: red; top:0px;left: 800px;
38 }
39 50%{
40 background: green; top:500px;left: 900px;
41 }
42 75%{
43 background: yellow; top:400px;left: 500px;
44 }
45 100%{
46 background: pink; top:0px;left: 100px;
47 }
48 }
49 </style>
50 </head>
51
52 <body>
53 <div>
54 <img src="poster.jpg" alt="" style="width:100px;height:100px;"/>
55 </div>
56 </body>
57 </html>
