使用Javascript生成随机Webkit动画

我想知道是否可以用javascript生成webkit动画。基本上我所需要的是，如果我点击元素A，元素B应该每次都用一个随机参数设置动画（这就是为什么我不能使用预先固定的CSS）。我正在测试是否可以通过javascript生成所有这些内容，我已经做了很多。我的代码还没有做任何随机的事情，但一旦我让它与javasript一起正常工作，就很容易使它随机。现在我只想在每次单击元素A时为元素B设置动画。我的代码如下所示：

$("#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

我的“随机旋转”类是我已经预定义的CSS：

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

---

我这样做的目的是，每次单击elementA时，我应该能够使我的elementB旋转。不幸的是，它只执行一次，无论我点击它多少次，或者重置动画名称多少次，它仍然只执行一次。我做错了什么？

要重新启动CSS3动画，您不能只删除并添加一个类，而不在命令之间增加一点延迟。这允许浏览器在添加新类之前有时间实际删除该类。您可以通过一个简单的setTimeout来实现这一点

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

下面可以找到更多信息和示例