Question

我想在每次页面刷新时随机化给定动画的持续时间。我一直在用jquery尝试它，但它似乎没有起作用：我认为它似乎不起作用。

相关的css：

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

动画background1在别处定义;我不是要改变关键帧动画部分。

Jquery的：

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

似乎没有发生任何事情。帮助一个jquery noob？

Answer 1

当浏览器注册CSS声明时，它会注册动画的名称background1和10s的持续时间，然后立即开始动画。如果要以新的持续时间重新启动动画，则必须等到动画结束，或者必须使用新的持续时间附加不同的动画名称。

你可以在这个小提琴上进行测试：http://jsfiddle.net/mfdj/Phnf5/9/

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

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

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

你应该得到你想要的结果。

请注意，浏览器处理重新附加/重新触发具有相同名称但持续时间不同的css动画的方式存在一些怪癖。例如，example fiddle Chrome可以不同方式处理摇动和闪光动画。尝试启动10秒动画，然后使用同名的1秒动画进行中断。摇动将完成它的10秒，而闪光灯只是清除动画。但是，如果您从闪光灯切换到摇动（反之亦然），则动画始终会重新开始。这些是你必须要注意的用css触发动画的怪癖。

Answer 2

其他的答案是错误！ .... 那css很好，它做了我上面的答案，但被jquery覆盖< / strong>即可。事实上，你的jquery也几乎没问题。

您只是在 css错误中获得动画功能。

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

看看我的示例： http://jsfiddle.net/techsin/Lju95/1/

要了解详情，请访问：http://css-tricks.com/snippets/css/keyframe-animation-syntax/

在bg1.css('-webkit-animation', 'background1 ' + number + 's'); background1 中应该引用动画名称而不是 bg1 所指的元素名称，不是吗？

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

要轻松学习jquery，请访问：https://tutsplus.com/course/30-days-to-learn-jquery/

要学习Html / Css3：转到w3schools.com然后http://learncss.tutsplus.com/

Answer 3

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

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

你也可以把它放在一个班级以保持清洁（有点）

#background1 .animated {
    -webkit-animation-name: background1;
}

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

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

3 个答案: