1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title></title>
 8     <style>
 9         div {
10             width: 100px;
11             height: 100px;
12             background-color: pink;
13             border-radius: 50%;
14             /* infinite 无限次 alternate无线循环 */
15             animation: myAni 2s ease 0s infinite alternate;
16             /* position: absolute; */
17             /* 动画属性 :---> 动画名称  动画时间 运动曲线 何时开始  播放次数  是否反方向 */
18         }
19         
20         @keyframes myAni {
21             from {
22                 transform: translateX(0)
23             }
24             to {
25                 transform: translateX(500px)
26             }
27         }
28         
29         @-webkit-keyframes myAni {
30             from {
31                 /* 从某个地方开始 */
32                 transform: translateX(0)
33             }
34             to {
35                 /* 从某个地方结束 */
36                 transform: translateX(500px)
37             }
38         }
39     </style>
40 </head>
41 
42 <body>
43     <div>
44 
45     </div>
46 </body>
47 
48 </html>