首页 > 代码库 > 【CSS3】动画animation-关键帧keyframes

【CSS3】动画animation-关键帧keyframes

2024-09-18 15:29:43   212人阅读

 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 }

 

【CSS3】动画animation-关键帧keyframes


联系
我们