1 <!DOCTYPE html>
2 <meta charset="UTF-8"/>
3 <html>
4
5 <head>
6 <style>
7 div {
8 width: 100px;
9 height: 100px;
10 background: red;
11 position: relative;
12 animation: myfirst 5s infinite alternate;
13 }
14
15 @keyframes myfirst {
16 0% {
17 background: red;
18 left: 0px;
19 top: 0px;
20 }
21
22 100% {
23 background: blue;
24 left: 200px;
25 top: 0px;
26 }
27
28 }
29 //鼠标划过停止动画效果
30 div:hover{
31 -webkit-animation-play-state:paused;
32 animation-play-state:paused;
33 }
34 </style>
35 </head>
36 <body>
37 <div></div>
38 </body>
39
40 </html>