如何使用jquery为-webkit css属性设置动画

Question

我希望通过点击一个按钮，我的对象的动画（已经用css设置）变得更快。 没问题，firefox工作没有问题，但我很难使它与chrome和webkit一起工作。

当我点击时我希望旋转速度提高2秒，所以我在javascript中使用了animate函数，它可以正常更改animation-duration css属性，但我不知道如何更改-webkit-animation-duration属性， 所以在改变动画持续时间后，我基本上用{c}函数将其复制到webkit-animation-duration。

最奇怪的是它工作正常，代码末尾的警报显示正确的值。但是动画在浏览器（chrome）上保持不变。

再一次，它与firefox完美配合。

Javascript：

$("#eoleplus").click(function(){
    $flowers = $(".middleflower")
    $flowers.animate({animationDuration:'-=2s'});
    $flowerspeed=$flowers.css('animation-duration');
    $flower.css('-webkit-animation-duration',$flowerspeed);
    alert($flower.css('-webkit-animation-duration'));
});

CSS：

.middleflower {
    z-index:4;
    animation-name: rotate;
    animation-duration: 11s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 11s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}