#鸿蒙通关秘籍#如何在鸿蒙中实现组件缩放与透明度变化动画？

在鸿蒙中，可以通过关键帧动画设置组件的缩放与显示隐藏。以下样例代码展示了如何为父组件和子组件应用缩放和透明度变化的动画。 html <!-- xxx.hml --> <div class="container"> <div class="fade"> <text>fading away</text> </div> <div class="bigger"> <text>getting bigger</text> </div> </div>

css /* xxx.css */ .container { background-color:#F1F3F5; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; } .fade { width: 30%; height: 200px; left: 35%; top: 25%; position: absolute; animation: 2s change infinite ease; opacity: 0; } .bigger { width: 20%; height: 100px; background-color: blue; animation: 2s change1 infinite linear; } text { width: 100%; height: 100%; text-align: center; color: white; font-size: 35px; animation: 2s change2 infinite linear; } @keyframes change{ from { background-color: #f76160; opacity: 1; } to { background-color: #09ba07; opacity: 0; } } @keyframes change1 { 0% { width: 20%; height: 100px; } 100% { width: 80%; height: 200px; } } @keyframes change2 { 0% { transform: scale(0); } 100% { transform: scale(1.5); } }