Javascript 无法更改'；动画持续时间'；使用jQuery在body上使用CSS

我在body元素上运行了一个CSS动画，默认持续时间为20秒。我希望它能够通过用户输入进行更改，但我似乎无法让它正常工作

我的默认CSS是：

body {    
    ...    
    animation: MoveBG 20s ease infinite;
}

如果运行此jQuery代码：

$('body').css('animation', 'MoveBG 2s ease infinite');

动画的持续时间仍为20秒。有趣的是，如果我跑步：

alert($('body').css('animation-duration'));

它会告诉我动画的持续时间是2秒（显然不是）

//动画持续时间应更改为2秒，但仍会在20秒时设置动画
var animation='MoveBG 2s ease infinite'；
$（'body'）.css（'animation'，animation）；
//它甚至说，它是动画在2秒
//警报（$（'body'）.css（'animation-duration'））
正文{
背景：线性梯度（向右，#f00，#0f0，#00f）；
背景尺寸：600%100%；
-webkit动画：MoveBG 20s轻松无限；
-moz动画：MoveBG 20s轻松无限；
-o动画：MoveBG 20s轻松无限；
动画：MoveBG 20秒轻松无限；
}
@-webkit关键帧移动BG{
0% {
背景位置：0
}
50% {
背景位置：100%0
}
100% {
背景位置：0
}
}
@-moz关键帧MoveBG{
0% {
背景位置：0
}
50% {
背景位置：100%0
}
100% {
背景位置：0
}
}
@-o-关键帧移动bg{
0% {
背景位置：0
}
50% {
背景位置：100%0
}
100% {
背景位置：0
}
}
@关键帧移动bg{
0% {
背景位置：0
}
50% {
背景位置：100%0
}
100% {
背景位置：0
}
}
我在Safari上试用过，效果很好。Chrome对任何东西都没有反应

尝试这样做，看看是否会产生任何影响：


$（'body'）.css({
-webkit动画：动画，
-moz动画：动画，
-o-动画：动画，
动画：动画，
});不完全确定，但看起来即使覆盖已启动的关键帧（可能是chrome bug），帧刷新也不会发生

其中一个技巧是隐藏和显示元素（异步），以便重新绘制（但不希望使用闪烁）


var动画='MoveBG 2s ease infinite'；
$（'body'）.css（'animation'，animation.hide（）.show（0）；
//^___异步显示
正文{
背景：线性梯度（向右，#f00，#0f0，#00f）；
背景尺寸：600%100%；
-webkit动画：MoveBG 20s轻松无限；
-moz动画：MoveBG 20s轻松无限；
-o动画：MoveBG 20s轻松无限；
动画：MoveBG 20秒轻松无限；
}
@-webkit关键帧移动BG{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}
@-moz关键帧MoveBG{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}
@-o-关键帧移动bg{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}
@关键帧移动bg{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}

编辑、更新

尝试（解决方法）


$（函数（）{
var二十=$（“.二十”）；
变量二=$（“.two”）；
var span=$（“span”）；
span.prepend（“二十：
+getComputedStyle（二十[0]，null）.WebkitAnimation
+“以前”
+“
两个：”
+getComputedStyle（两个[0]，null）.WebkitAnimation
+“之前”）；
//动画持续时间应更改为2秒，但仍在20秒时设置动画
var duration=“2s”；
//$（'body'）.css（'animation'，animation）；
两个[0]。style.WebkitAnimationDuration=duration；
$（“样式”）.detach（）.hide（函数（）{
$（“标题”）。前置（本）；
});
span.追加（“
20：”
+getComputedStyle（二十[0]，null）.WebkitAnimation
+“之后”
+“
两个：”
+getComputedStyle（两个[0]，null）.WebkitAnimation
+“之后”）；
//它甚至说，它是动画在2秒
警报（两个.css（'animation-duration'））
+“\n”
+getComputedStyle（两个[0]，null）.webkitAnimationDuration）；
});
span{
字体大小：12px；
高度：50px！重要；
}
第二组{
左边距：20px；
}
div{
显示：内联块；
位置：相对位置；
宽度：200px；
高度：400px；
背景：线性梯度（向右，#f00，#0f0，#00f）；
背景尺寸：600%100%；
-webkit动画：MoveBG 20s轻松无限；
-moz动画：MoveBG 20s轻松无限；
-o动画：MoveBG 20s轻松无限；
动画：MoveBG 20秒轻松无限；
}
@-webkit关键帧移动BG{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}
@-moz关键帧MoveBG{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}
@-o-关键帧移动bg{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}
@关键帧移动bg{
0%{背景位置：0 0}
50%{背景位置：100%0}
100%{背景位置：0}
}



这对我也不起作用。此外，我很确定jQuery现在会自动添加供应商前缀。这似乎是一个框架刷新问题。如果隐藏并显示帧刷新<代码>$（'body'）.css（'animation'，animation.hide（）.show（0）@discoinfirator欢迎您……）不过，我很想知道这个问题的实际原因（是的，当然。我会考虑提交一份错误报告。@Discoinfirator我甚至尝试了硬件加速（translate3d），这当然不是桌面浏览器所需要的，它提高了移动动画的性能。但这也没什么好运气。不幸的是，你所拥有的正是OP的例子所拥有的。它忽略了一个2s
   $('body').css('animation', animation).hide().show(0);
                                                   //^__ Need this to force asyncronous show

var duration = "2s";
$("body")[0].style.WebkitAnimationDuration = duration;
$("style").detach().hide(function() {
  $("head").prepend(this);
});