css动画旋转和翻译不能一起工作[重复]答案

【问题标题】：css animation rotate and translate doesn't work together [duplicate]css动画旋转和翻译不能一起工作[重复]
【发布时间】：2016-07-27 02:33:15
【问题描述】：

我正在尝试使用 @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;
  }
}

【问题讨论】：

将转换组合成一个属性。 CSS 声明不是附加的。最新的会覆盖前者。

标签： html css css-animations css-transforms

【解决方案1】：

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

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

Updated codepen

【讨论】：