使用變換組合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

回答