css - 使用变换组合 CSS 动画

Question

我想编写两个单独的 CSS 关键帧动画来使图像振动和旋转（请参阅http://jsfiddle.net/3zAeZ/）。我相信我遇到的问题是：我在两个关键帧规则中都设置了变换属性，因此一个规则正在破坏另一个规则。

我知道这可以使用 top & left 而不是 translate，但是如果我进行转换（例如，如果我需要以不同方式定位图像），关键帧规则将来会更容易重用。

我难住了。我可以这样做吗？有没有更好的方法我应该这样做？

Answer 1

您可以使用多种转换，例如

transform: rotate(1337deg) scale(1.5) translate(6em, 300px);

现在我意识到你也需要两个不同的动画持续时间。所以我能想到的最好的方法是使用两个元素http://jsfiddle.net/3zAeZ/1/