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;
  }
}

Answer 1

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

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

更新代码笔