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