使用jQuery更改引导动画进度条动画持续时间

我正在尝试更改Twitter引导动画进度条上使用的CSS3动画的持续时间。 我想要的结果是使用jQuery减少动画的持续时间，这样我就有了更快的动画

我得到了以下HTML和CSS，并使用了以下jQuery

HTML:

我使用以下jQuery来更改值，但这似乎没有任何效果。我使用Chrome作为我的测试浏览器，但我似乎在所有浏览器中都能看到这种行为

jQuery：

$("#test").css("-webkit-animation-duration", "1s");

如果我在执行jQuery之后获取动画持续时间的值，它将被读取为“1s”，而不是默认的“2s”，但视觉效果保持不变

---

编辑：在设置值后使用jQuery隐藏和显示元素似乎可以获得Internet Explorer的效果。

似乎至少Chrome没有检测到css属性

动画持续时间的更改。但是，通过删除然后重新添加
进度条
类，当在
设置超时
中重新添加进度条类时，更改
动画持续时间
时，动画将起作用

$('#test').css('animation-duration', '0.1s').removeClass('progress-bar');
setTimeout(function() { 
    $('#test').addClass('progress-bar');
}, 1);

这看起来非常难看，而且容易出错，但它确实有效

我认为另一个更好的方法是设置所有动画属性。这项工作无需费心添加和删除
进度条
类：

var secondFraction = '0.2'
$('#test').css('animation', secondFraction + 's linear 0s normal none infinite progress-bar-stripes');


$（文档）.ready（函数（）{
$（'.progress bar'）.css（“宽度”，
函数（）{
返回$（this.attr（“aria valuenow”）+“%”；
}
) 
});
var counterBack=setInterval（函数（）{
var date=$（“#time i”）.html（）；
var d=日期/30*100；
var i=数学四舍五入（d）；
如果（i<20）{
$（“#progress”）.addClass（'progress-bar-danger'）.removeClass（'progress-bar-info'）；
}
如果（i<70）{
$（“#progress”）.addClass（'progress-bar-info'）.removeClass（'progress-bar-success'）；
}
如果（i>0）{
$（'.progress bar'）.css（'width'，i+'%'）；
}否则{
$（'.progress bar'）.css（'width'，0+'%'）；
间隙（反向）；
}  
}, 1000);
。进度{
边缘顶部：10px；
边缘底部：10px；
高度：25px；
}
.进步.技巧{
字体：普通12px“开放式SAN Web”；
线高：35px；
填充：0；
利润率：0.20px；
文本转换：大写；
}
.进步.技能.瓦尔{
浮动：对；
字体风格：普通；
利润率：0.20px 0.0；
}
.进度条{
文本对齐：左对齐；
过渡时间：3s；
}

您的时间{{计数器|异步}
这是正确答案。jQuery不需要参与。对不起，我应该提到我正在使用它们作为创建“流”效果的简单方法，因此我需要使用jQuery动态更改它们，否则我只会通过样式表应用新样式。
进度条上的
转换
似乎只有在宽度更改时才会出现。是您要更改的
过渡持续时间
，还是
动画持续时间
？您想在过渡发生时改变其速度，还是想在下次过渡发生时改变其速度？我想更改
动画
持续时间。我对宽度改变时发生的
转换感到满意。@EmilH不幸的是，第二个选项对我不起作用。虽然我同意这是最好的。我的行为和问题中描述的一样。
$('#test').css('animation-duration', '0.1s').removeClass('progress-bar');
setTimeout(function() { 
    $('#test').addClass('progress-bar');
}, 1);

var secondFraction = '0.2'
$('#test').css('animation', secondFraction + 's linear 0s normal none infinite progress-bar-stripes');