开发指导—利用CSS动画实现HarmonyOS动效（二）

注：本文内容分享转载自 HarmonyOS Developer 官网文档点击查看《开发指导—利用CSS动画实现HarmonyOS动效（一）》

3. background-position 样式动画

通过改变 background-position 属性（第一个值为 X 轴的位置，第二个值为 Y 轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。

• /* xxx.css */
  .container {
  height: 100%;
  background-color:#F1F3F5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  }
  .content{
  width: 400px;
  height: 400px;
  /* 不建议图片长宽比为1:1 */
  background-image: url('common/images/bg-tv.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  animation: change 3s infinite;
  border: 1px solid black;
  }
  .content1{
  margin-top:50px;
  width: 400px;
  height: 400px;
  background-image: url('common/images/bg-tv.jpg');
  background-size: 50%;
  background-repeat: no-repeat;
  animation: change1 5s infinite;
  border: 1px solid black;
  }
  /* 背景图片移动出组件 */
  @keyframes change{
  0%{
    background-position:0px top;
  }
  25%{
    background-position:400px top;
  }
  50%{
    background-position:0px top;
  }
  75%{
    background-position:0px bottom;
  }
  100%{
    background-position:0px top;
  }
  }
  /* 背景图片在组件内移动 */
  @keyframes change1{
  0%{
    background-position:left top;
  }
  25%{
    background-position:50% 50%;
  }
  50%{
    background-position:right bottom;
  }
  100%{
    background-position:left top;;
  }
  }
  

  说明
  background-position 仅支持背景图片的移动，不支持背景颜色（background-color）。

4.  svg 动画
为 svg 组件添加动画效果。

属性样式动画
在 Svg 的子组件animate中，通过 attributeName 设置需要进行动效的属性，from 设置开始值，to 设置结束值。

说明
在设置动画变化值时，如果已经设置了 values 属性，则 from 和 to 都失效。

路径动画
在 Svg 的子组件animateMotion中，通过 path 设置动画变化的路径。

animateTransform 动画
在 Svg 的子组件animateTransform中，通过 attributeName 绑定 transform 属性，type 设置动画类型，from 设置开始值，to 设置结束值。

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #F1F3F5;
}