開始時的WebKit動畫

Question

我已經設置了WebKit關鍵幀：hover和元素正在轉換，因爲它應該。當用戶從元素中刪除他的鼠標光標（基本上是JS中的onmouseover和onmouseout）時，應該激活反轉效果。

所以我創建了反向關鍵幀並將它們放置在默認的CSS選擇器中。問題在於這些關鍵幀在頁面加載時激活，但只有在您將鼠標從元素中移出時才需要激活它們。

是否還有其他一些需要設置的屬性，或者只有使用JS才能實現？

編輯：這裏是的jsfiddle測試案例（圖中的WebKit着，當然）：http://jsfiddle.net/nkEwQ/

Answer 1

沒有JS： 除去從#button-webkit-animation-name:bouncedown;，
與-webkit-transition: all .5s ease-in-out;
取代它（不能得到漂亮的反彈效果，但它動畫回到正方形） http://jsfiddle.net/SebastianPataneMasuelli/nkEwQ/7/

隨着JS 我從#button中刪除了動畫，創建了一個處理webkit動畫的類（.active），並使用jQuery將該類添加到按鈕mouseover上。

通過這種方式，#button在加載時沒有動畫，但當用戶將鼠標移到它上面時，動畫聲明將添加到它。

看到它在這裏：只有http://jsfiddle.net/SebastianPataneMasuelli/nkEwQ/5/

Answer 2

JS。因爲沒有其他的僞類除了 ：活躍， ：專注， ：第一胎， ：懸停， ：郎鹹平， ：鏈接， ：參觀。