关键帧动画：@keyframes：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>关键帧动画</title>
6 <style type="text/css">
7 .div1{
8 width: 200px;
9 height: 200px;
10 background: yellow;
11
12 /*关键帧动画的调用*/
13 /*1.动画名:作用告诉系统使用哪一组动画*/
14 animation-name: candy,hou2;
15
16 /*2.动画的持续时长*/
17 animation-duration: 1s,2s;
18 /*上述两个属性必须要有*/
19
20 /*3.变化曲线*/
21 animation-timing-function: ease-in-out;
22
23 /*4.推迟时长*/
24 animation-delay: 2s;
25
26 /*5.重复次数
27 infinite:一直重复,(开始设置延迟再重复时就不会有延迟)*/
28 animation-iteration-count: 4;
29
30 /*6.动画方向
31 normal:正方向
32 reverse:反方向
33 alternate:次数为奇数时,正方向;为偶数时,反方向
34 alternate-reverse:次数为奇数时,反方向;为偶数时,正方向 */
35 animation-direction: alternate;
36
37 /*7.动画完成时的状态
38 backwards:动画完成时,保持动画开始之前的状态
39 forwards:动画完成时,保持动画结束之后的状态
40 both:同时向前向后,表现形式跟forwards一样 */
41 animation-fill-mode:forwards;
42 }
43
44 /*声明一组关键帧动画*/
45 @keyframes candy{
46 /* from:表示起点
47 to:表示终点*/
48 from{
49 opacity: 1;
50 /*width: 500px;*/
51 }
52 to{
53 opacity: 0;
54 /*width: 200px;*/
55 }
56 }
57
58 @keyframes hou2{
59 from{
60 height: 200px;
61 }
62 to{
63 height: 500px;
64 }
65 }
66
67 /**/
68 .div2{
69 width: 200px;
70 height: 200px;
71 background: red;
72 margin: 100px auto;
73 animation: heart 1s linear /*infinite*/,candy 1s /*infinite*/;
74 }
75 @keyframes heart{
76 0%{
77 transform: scale(1,1);
78 }
79 20%{
80 transform: scale(1.3,1.3);
81 }
82 50%{
83 transform: scale(2,2);
84 }
85 80%{
86 transform: scale(1.3,1.3);
87 }
88 100%{
89 transform: scale(1,1);
90 }
91 }
92 </style>
93 </head>
94 <body>
95 <!--关键帧动画
96 在使用关键帧动画之前,我们得先声明一组关键帧动画,使用@keyframes进行声明
97 2.声明完成之后,要在该标签的样式中,通过animation使用该组动画
98 -->
99 <div class="div1"></div>
100
101 <div class="div2"></div>
102 </body>
103 </html>
时间： 2024-08-04 22:24:45