如何组合多个使用transform的CSS动画与属性？

我有两个CSS动画，分别是旋转动画和倾斜动画：

旋转动画代码：

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

使用方式：

.spinning {
  animation: spinning 1s infinite;
}

倾斜动画代码：

@keyframes skewing {
  0% {
    transform: skew(0deg);
  }
  25% {
    transform: skew(40deg);
  }
  50% {
    transform: skew(0deg);
  }
  75% {
    transform: skew(-40deg);
  }
  100% {
    transform: skew(0deg);
  }
}

当尝试把两个动画同时应用到同一个元素，或者添加静态transform属性时，会出现覆盖问题，只能生效其中一个：

.fun {  // 无法生效——只能三选一 :(
  animation: spinning 1s infinite;
  animation: skewing 1s infinite;
  &:hover {
    transform: scale(2.0)
  }
}

手动合并所有transform到一个keyframes会失去动画的可复用性，有没有办法实现动画的组合？

解决方案 #

方法1：使用CSS变量拆分变换属性 #

通过CSS变量将不同的变换（旋转、倾斜、缩放）拆分，每个动画仅修改对应的变量，元素的transform属性组合所有变量值，避免互相覆盖。

示例代码：

/* 定义全局变换变量 */
:root {
  --rotate: 0deg;
  --skew: 0deg;
  --scale: 1;
}

/* 修改旋转动画，仅更新rotate变量 */
@keyframes spinning {
  100% {
    --rotate: 360deg;
  }
}

/* 修改倾斜动画，仅更新skew变量 */
@keyframes skewing {
  25% {
    --skew: 40deg;
  }
  50% {
    --skew: 0deg;
  }
  75% {
    --skew: -40deg;
  }
  100% {
    --skew: 0deg;
  }
}

.fun {
  /* 组合所有变换变量 */
  transform: rotate(var(--rotate)) skew(var(--skew)) scale(var(--scale));
  /* 同时应用两个动画 */
  animation: spinning 1s infinite, skewing 1s infinite;
  /* 添加hover过渡效果 */
  transition: transform 0.3s;
}

.fun:hover {
  /* 修改scale变量实现缩放 */
  --scale: 2;
}

这种方法无需额外DOM元素，保持动画的可复用性，同时支持静态变换的叠加。

方法2：使用嵌套元素分离动画 #

将不同的动画应用到嵌套的父子元素上，每个元素的transform独立生效，不会互相干扰。

示例代码：

<div class="spinning">
  <div class="skewing fun">内容</div>
</div>

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

@keyframes skewing {
  0% { transform: skew(0deg); }
  25% { transform: skew(40deg); }
  50% { transform: skew(0deg); }
  75% { transform: skew(-40deg); }
  100% { transform: skew(0deg); }
}

.spinning {
  animation: spinning 1s infinite;
}

.skewing {
  animation: skewing 1s infinite;
}

.fun:hover {
  transform: scale(2.0);
}

这种方法无需修改原有动画代码，实现简单，但会增加DOM层级。

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