1# 属性样式动画
2
3在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。
4
5
6```html
7<!-- xxx.hml -->
8<div class="container">
9  <div class="fade">
10    <text>fading away</text>
11  </div>
12  <div class="bigger">
13    <text>getting bigger</text>
14  </div>
15</div>
16```
17
18
19```css
20/* xxx.css */
21.container {
22  background-color:#F1F3F5;
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  flex-direction: column;
27  width: 100%;
28  height: 100%;
29}
30.fade {
31  width: 30%;
32  height: 200px;
33  left: 35%;
34  top: 25%;
35  position: absolute;
36  animation: 2s change infinite friction;
37}
38.bigger {
39  width: 20%;
40  height: 100px;
41  background-color: blue;
42  animation: 2s change1 infinite linear-out-slow-in;
43}
44text {
45  width: 100%;
46  height: 100%;
47  text-align: center;
48  color: white;
49  font-size: 35px;
50  animation: 2s change2 infinite linear-out-slow-in;
51}
52/* 颜色变化 */
53@keyframes change{
54  from {
55    background-color: #f76160;
56    opacity: 1;
57  }
58  to {
59    background-color: #09ba07;
60    opacity: 0;
61  }
62}
63/* 父组件大小变化 */
64@keyframes change1 {
65  0% {
66    width: 20%;
67    height: 100px;
68  }
69  100% {
70    width: 80%;
71    height: 200px;
72  }
73}
74/* 子组件文字缩放 */
75@keyframes change2 {
76  0% {
77    transform: scale(0);
78  }
79  100% {
80    transform: scale(1.5);
81  }
82}
83```
84
85
86![zh-cn_image_0000001217168141](figures/zh-cn_image_0000001217168141.gif)
87
88
89> **说明：**
90> - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。
91>
92> - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。
93