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>
原文地址：https://www.cnblogs.com/yuanxiangguang/p/11325545.html
时间： 2024-10-18 06:56:50