css 动画旋转和平移不能一起工作

Question

我正在使用@keyframes 尝试 css 动画，但是 css 变换旋转和平移属性无法协同工作。

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

代码可以在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 属性中，每个转换由 space:

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

Updated codepen

css 动画旋转和平移不能一起工作

css animation rotate and translate doesn't work together

html

css

css-transforms

css-animations