CSS动画旋转和平移不能同时运行

Question

我正在尝试使用 @keyframes 进行 css 动画，但是 css Transform 的 rotate 和 translate 属性不能一起工作。

请指导我这里出了什么问题。谢谢！！

您可以在 codepen 上检查代码：http://codepen.io/anon/pen/XdzwZB 以下是我的 @keyframes 代码：

@keyframes slideIn {
  0%, 100% {
    transform: translate(10px);
    transform: rotate(0deg);
    color: red;
  }
  25% {
    transform: translate(125px);
    transform: rotate(360deg);
    color: green;
  }
}

- Bmax

---

将转换合并为单个属性。CSS声明不是可加的，最新的会覆盖旧的。 - Harry

Answer 1

应用多个transforms的正确方法是将它们全部放在一个transform属性中，并使用空格分隔每个变换：

正确的方式是将所有变换都放在一个transform属性中，每个变换之间用空格分隔：

@keyframes slideIn {
  0%, 100% {
    transform: translate(10px) rotate(0deg);
    color: red;
  }
  25% {
    transform: translate(125px) rotate(360deg);
    color: green;
  }
}

更新后的 CodePen

- Jacob G