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

Question

假设我有一个

spinning

动画，如下所示：

@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 {  // doesn't work - pick one of three :(
  animation: spinning 1s infinite;
  animation: skewing 1s infinite;
  &:hover {
    transform: scale(2.0)
  }
}

参见 CSS Playground 示例。

我意识到我可以手动将所有变换组合成一个巨大的-

keyframes

——但随后我就失去了可重用、可组合动画的用处。有可能以某种方式组合这些吗？

Answer 1

通过使用

animation-composition

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

.fun {
  animation: 
    skewing 1s infinite,
    spinning 1s infinite;
  animation-composition: add;
  &:hover {
    transform: scale(2) skew(10deg);
  }
}

<div class="fun">wheeeee</div>

或者通过更新旋转来单独变换属性，例如：

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes spinning {
  100% {
    rotate: 360deg;
  }
}

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

.fun {
  animation: 
    skewing 1s infinite,
    spinning 1s infinite;
  &:hover {
    transform: scale(2) skew(10deg);
  }
}

<div class="fun">wheeeee</div>