css动画旋转和翻译不能一起工作

Question

我正在使用@keyframes尝试css动画，但是css Transform旋转和翻译属性并不是一起工作的。

请告知此处出现的问题。谢谢！

您可以检查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;
  }
}

Updated codepen