如何让CSS元素单次旋转与无限循环缩放动画同时生效？

问题出在两个动画都修改了transform属性——CSS里transform是复合属性，多个动画同时作用时，后声明的会覆盖前一个的transform值，所以只有最后一个动画能跑起来。

下面给两种可行的解决办法：

办法一：用嵌套元素分离动画 #

把旋转和缩放分别放在父子元素上，各自的transform互不干扰，兼容性拉满：

<div class="rotate-wrap">
  <div class="shape scale-ani"></div>
</div>

.shape{
  width:100px;
  height:50px;
  background-color: brown;
}

/* 外层容器负责单次旋转 */
.rotate-wrap{
  animation: rotate 5s ease forwards;
}

/* 内层元素负责无限来回缩放 */
.scale-ani{
  animation: scale 2s linear infinite alternate;
}

@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(2);
  }
}

办法二：用动画合成让transform叠加 #

如果不想嵌套元素，可以用animation-composition: add让两个动画的transform效果叠加（注意这个属性需要现代浏览器支持）：

<div class="shape ani1"></div>

.shape{
  width:100px;
  height:50px;
  background-color: brown;
}

.ani1{
  animation: scale 2s linear infinite alternate, rotate 5s ease forwards;
  /* 开启动画合成，让transform效果叠加而非覆盖 */
  animation-composition: add;
}

@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(2);
  }
}

两种方案各有优劣：

• 嵌套元素方案兼容性更好，适配所有浏览器；
• 动画合成方案代码更简洁，但要确认目标浏览器支持animation-composition。

内容的提问来源于stack exchange，提问作者codingsplash