使用变换组合CSS动画

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

我知道这个工程采用顶&离开，而不是翻译，但关键帧规则会更容易在未来的重用，如果我做一个变换（例如，如果我以往任何时候都需要将图像不同的位置）。

我很难过。我可以这样做吗？有更好的方法我应该这样做吗？

您可以使用多个变换像

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

现在我意识到，你需要两个不同的动画时长为好。所以最好的我可以拿出来是使用两个元素http://jsfiddle.net/3zAeZ/1/

2012-08-10 17:37:26 Prinzhorn

是的，这两个不同的时机肯定是纠结。这似乎是我能想到的唯一途径。不幸的是，我甚至无法使用psuedo元素来清除它，因为大多数浏览器不支持psudo-elements上的动画。感谢你的回答！ – 2012-08-11 02:17:41

回答