使用jQuery更改css动画持续时间

我想根据jQuery变量更改CSS中动画的速度

<div class="elements">
    <div style="background: #000"></div>
    <div style="background: #f90"></div>
    <div style="background: #fff"></div>
</div>

问题是动画每次看起来都一样，而类已成功更改

.elements div.animate_0 { animation: animated 0s linear infinite; }
.elements div.animate_1 { animation: animated 2s linear infinite; }
.elements div.animate_2 { animation: animated 6s linear infinite; }
.elements div.animate_3 { animation: animated 10s linear infinite; }

@keyframes animated { 100% { transform:rotate(360deg); } }

---

为什么？

我刚刚试着创建一个示例，这很有效。你可以看到 可能这只是选择器的一个输入错误，不是“齿轮”而是“元素”

$（“.elements div”）
.removeClass（）
.addClass（“动画”+幻灯片元素）；

.elements div.animate_0 { animation: animated 0s linear infinite; }
.elements div.animate_1 { animation: animated 2s linear infinite; }
.elements div.animate_2 { animation: animated 6s linear infinite; }
.elements div.animate_3 { animation: animated 10s linear infinite; }

@keyframes animated { 100% { transform:rotate(360deg); } }