关键帧动画中无法使用`transform:rotate`

Question

这是我的代码：

.wave-animation {
  display: inline-block;
  animation-name: wave;
  animation-duration: 4s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(60deg);
  }
  30% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(60deg);
  }
  40% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<span class="wave-animation">👋</span>

根据SO警方的说法，这足以让你明白我想要做什么。如果不是，请要求澄清！

所以问题来了：

动画不起作用。

如果我将

transform: rotate(60deg)

应用于班级，手将旋转 60 度。所以轮换有效。

如果我将关键帧动画中的

transform: rotate

替换为

transform: translateY

，手就会有动画效果。所以动画有效。

但是将两者结合起来，就会发生注意到。这是怎么回事？

我也尝试使用 CSS

rotate

而不是

transform: rotate

，但同样的问题。

Answer 1

由于在单个关键帧中使用多个变换，您的动画可能无法正常工作。当您应用变换时，它会覆盖任何先前的变换。要组合多个变换（例如旋转和平移），您需要一起指定它们。

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(60deg);
  }
  30% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(60deg);
  }
  40% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

如果你想添加翻译或其他效果，你可以这样组合它们：

@keyframes wave {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(60deg) translateY(-10px); // Example translation
  }
  30% {
    transform: rotate(0deg) translateY(0);
  }
  35% {
    transform: rotate(60deg) translateY(-10px);
  }
  40% {
    transform: rotate(0deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}