使用Javascript生成隨機Webkit動畫

我想知道是否可以使用javascript生成webkit動畫。基本上所有我需要的是，如果我點擊元素A，元素B應該每次隨機參數動畫（這就是爲什麼我不能使用預先固定的CSS）。我正在測試，如果我實際上可以通過JavaScript生成所有這些，並且Ive得到了很多。我的代碼不會隨意做任何事情，但是一旦我使用javasript正確工作，就很容易使它隨機化。所以現在我只希望我每次點擊元素A.我的代碼看起來像這樣的動畫元素B：使用Javascript生成隨機Webkit動畫

$("#elementA").live('touchstart mousedown',function() { 

$("head style").remove(); 
var cssAnimation = document.createElement('style'); 
cssAnimation.type = 'text/css'; 
var rules = document.createTextNode('@-webkit-keyframes random_spin {'+ 
'from { -webkit-transform: rotate(0deg);  }'+ 
'to  { -webkit-transform: rotate(1440deg); }'+ 
'}'); 

cssAnimation.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssAnimation); 

$("#elementB").removeClass("random_spin"); 
$("#elementB").css({'-webkit-animation-name': ''}); 

$("#elementB").css({'-webkit-animation-name': 'random_spin'}); 
$("#elementB").addClass("random_spin"); 
});

在那裏，我剛添加的動畫標題，我把它應用到elementB。

我「random_spin」類我已經預定義的CSS：

.random_spin { 
    -webkit-animation-duration:   5s; 
    -webkit-animation-timing-function: ease; 
}

我有此意的是，我應該能夠讓我elementB旋我點擊elementA每次。不幸的是，它只做了一次，無論我點擊了多少次，或者重置了多少次動畫名稱，它仍然只做了一次。我究竟做錯了什麼？

來源

2012-10-16 Carlos R. Batista

要重新啓動一個CSS3動畫，您不能在命令之間放置一個小延遲的情況下刪除並添加一個類。這允許瀏覽器有時間在添加新類之前實際刪除類。你可以用一個簡單的setTimeout來做到這一點

setTimeout(function(){ 
    $("#elementB").addClass("random_spin"); 
}, 100);

更多的信息和例子可以在下面找到。

http://css-tricks.com/restart-css-animation/

來源

2012-10-16 18:44:39 Dcullen

使用Javascript生成隨機Webkit動畫

回答

相關問題