如何在WebKit中使用CSS實現搖擺動畫？

Question

嘿
我正在尋找一種讓我的圖像旋轉〜50度，暫停一小段時間（>一秒），旋轉另一個方向至〜-50度，然後返回原點的方法。並重復。

我有麻煩告訴它迴轉。任何幫助將是非常好的。

Ahuge

Answer 1

webkit中的動畫可能非常簡單。您首先使用@-webkit-keyframes rule宣佈動畫效果：

@-webkit-keyframes swing { 
from { 
    left: 0px; 
} 
to { 
    left: 200px; 
} 
} 

Webkit使用稱爲關鍵幀動畫技術。如果你熟悉Flash或3D動畫，你就會知道它是什麼。基本上，您爲一系列「關鍵幀」中的元素設置了某些位置，並根據您使用另一組規則聲明的設置，它可以在您設置的關鍵幀之間平滑地「設置」元素的動畫。

好的，所以一旦我們定義了一個動畫，我們將它應用到-webkit-animation-name和相關的屬性。

div { 
-webkit-animation-name: swing; 
-webkit-animation-duration: 6s; 
-webkit-animation-iteration-count: 10; 
-webkit-animation-direction: alternate; 
} 

這個高度的bounce動畫，告訴它「玩」 6秒十倍，使反向每隔動畫播放。

關鍵幀使用百分比值指定，「from」等於0%，「to」與100%相同。

就我所知，這隻適用於Webkit nightly builds，所以絕大多數用戶不會看到這一點。

Here is an example for you雖然它不會動畫，除非您使用每晚構建。

如果你想讓更多的用戶看到這個動畫，我建議使用jQuery解決方案。