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