IE10 CSS3动画速度不使用jQuery动态更新

这是我正在进行的一个更大的项目的一部分。我有一系列移动div，使用@keyframes和CSS3的动画属性。由于transform3d的问题以及选择使用left:和top:等，在webkit浏览器中很难实现这一点后，我终于有所进展。我有更快/更慢的按钮，这些按钮更改了秒属性，指定了动画速度。这在Chrome中运行良好，但在IE中不起作用

（编辑：无限循环动画现在）

如您所见，我可以设置初始动画样式，如下所示：

var speed = 1.5;
var animationCSS = 'myfirst '+speed+'s';


$('#button1').click(function () {
alert("Set initial speed");

$('#test')
.css('background-color', '#000')
.css('animation', animationCSS);
.css('-webkit-animation', animationCSS); 
});

因此，我使用jQuery以自定义速度动态分配动画CSS。我有第二个按钮来更改速度变量并重新分配CSS。当应用了新的内联样式时，动画应该再次出现。这在chrome中运行良好，但不是IE10：（我有一个单独的removeCss函数，它似乎运行良好，不管有没有这一行，它在chrome中都可以运行

$('#button2').click(function () {
    alert("Slow down and change speed");
    %('#test').removeCss('animation,-webkit-animation,
    speed = 10;
    animationCSS = 'myfirst '+speed+'s';
    $('#test').css('background-color', '#00FFFF')
        .css('animation', animationCSS)
       .css('-webkit-animation', animationCSS);
});

---

如果我检查元素，发现新的速度变量已经内联应用，但没有明显的变化，这让我很恼火。有什么想法吗？

据我所知，只有将

动画名称

更改为不同的值，动画才会回复。最简单的方法是附加

animationEnd

事件，并设置

this.style.animationName=“”；

在该处理程序中。然后，当您将新动画指定给它时，它将正确播放。

创建一个名为

mysecond

的动画，该动画具有相同的关键帧，并在需要更新速度时在myfirst和mysecond之间交替动画名称。这将触发动画更新。或者，创建一个对于不同的动画，除了速度和设置适当的类外，还有几个类具有不同的动画名称

jsfiddle：

如果你想在它们之间平稳过渡，你应该捕捉animationiteration事件，并在那时更改类。

谢谢你的回答：）在我的主要项目中，动画不断发生，设置为无限，我正在改变它的速度，因为它仍然在移动。我猜animationEnd事件在这种情况下不适用？很抱歉造成混淆，这里是一个带有无限动画的JSFIDLE：我还添加了删除animationName的行，不幸的是，我对此没有什么乐趣：(