我想知道是否可以使用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。
我的“random_spin”类是我已经预定义的CSS:
.random_spin {
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
}
我的意图是每次点击elementA时我都应该能够使我的elementB旋转。不幸的是它只执行一次,无论我点击它多少次或重置动画名称多少次它仍然只做一次。我做错了什么?
答案 0 :(得分:1)
要重新启动CSS3动画,您不能只删除并添加一个类,而不会在命令之间放置一点延迟。这允许浏览器在添加新类之前实际删除类。您可以使用简单的setTimeout
执行此操作setTimeout(function(){
$("#elementB").addClass("random_spin");
}, 100);
更多信息和示例可以在下面找到。