使用javascript/jquery随机化CSS3动画时间？

我希望在每次页面刷新时随机设置给定动画的持续时间。我一直在用jquery尝试它，但它似乎不起作用：我已经尝试过了，但它似乎不起作用

相关css：

#background1 {
    -webkit-animation: background1 10s;
}

动画背景1在别处定义；我没有尝试更改关键帧动画部分

Jquery：

 var bg1 = $('#background1');
 var number = Math.floor(Math.random() * 10) + 5;
 bg1.css('-webkit-animation', 'background1 ' + number + 's');

---

似乎什么也没发生。帮助jquery noob？

当浏览器注册CSS声明时，它会注册动画的名称

background1

和持续时间

10s

，然后立即启动动画。如果要使用新的持续时间重新启动动画，则必须等待动画完成，或者必须使用新的持续时间附加其他动画名称

您可以在此小提琴上进行测试：

更改名称时，始终可以立即触发动画

只有在为持续时间设置不同的值并在当前动画完成后执行此操作时，才能通过仅更改持续时间来重新启动同一动画

由于初始动画的长度为10秒，并且希望立即触发随机时间的持续时间，因此只需删除此声明：

#background1 {
    -webkit-animation: background1 10s;
}

你应该得到你想要的结果

---

请注意，浏览器处理重新附加/重新触发同名但持续时间不同的css动画的方式存在一些怪癖。例如，在Chrome中，处理抖动和flash动画的方式不同。尝试启动一个10秒的动画，然后用同名的1秒动画中断。抖动将在10秒后结束，而闪光灯只会清除动画。但是，如果从flash切换到shake（反之亦然），动画将始终以全新的方式开始。这些是使用css触发动画的怪癖，您必须注意。

正如

Fox

指出的那样-删除该声明。然后，使用JS，您可以执行以下操作：

var bg1 = $('#background1');
var number = Math.floor(Math.random() * 10) + 5;
bg1.css('-webkit-animation', 'background1 ' + number + 's');

你也可以把它放在一个类中，让事情更干净（有点）

---

其他答案所说的都是错误的…css很好，它按照上面的答案做，但是被jquery覆盖了。事实上，您的jquery也几乎很好

您刚刚在css中获得了错误的动画功能

您永远不会定义要运行的动画。您正在使用jquery成功地将动画附加到元素。但是什么动画

看看我的例子：

要了解更多信息，请访问此处：

在

bg1.css（'-webkit animation'，background1'+number+'s'）background1应该指的是动画名称，而不是bg1已经指的元素名称，不是吗

动画名称和动画本身可以在css中定义，然后用新的随机值调用

要轻松学习jquery，请访问此处：

要学习Html/Css3：请访问w3schools.com
你是说动画的持续时间总是10秒吗？你想删除css部分，因为你是通过JQuerys设置的。这是你想要的吗？持续时间不是起点！？干杯如果你不介意的话，请选择我正确的答案。
#background1 .animated {
    -webkit-animation-name: background1;
}

// jQ
$('#background1').addClass('animated').css(
    '-webkit-animation-duration',
    (Math.floor(Math.random() * 10) + 5) + 's'
);