1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div></div> 10 </body> 11 </html>
1 div{
2 width: 300px;
3 height: 200px;
4 background-color: red;
5 animation-name: myanimation;
6 animation-duration: 3s;
7 animation-timing-function: ease;
8 animation-delay: 1s;
9 animation-iteration-count: 3/*infinite*/;/*infinite一直播放*/
10 animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/
11 animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/
12 animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/
13 }
14 @keyframes myanimation{
15 /* from{
16 width: 150px;
17 height: 100px;
18 background-color: blue;
19 }
20 to{
21 width: 200px;
22 height: 150px;
23 background-color: green;
24 }*/
25 0%{
26 margin-left: 20px;
27 background-color: pink;
28 }
29 20%{
30 margin-left: 100px;
31 background-color: orange;
32 }
33 40%{
34 margin-top: 100px;
35 background-color: yellow;
36 }
37 60%{
38 margin-top: 200px;
39 background-image: grey;
40 }
41 100%{
42 margin-right: 300px;
43 margin-top: 150px;
44 background:green;
45 }
46 }
时间： 2024-08-05 23:40:42