javascript - Jquery 在 Safari 中应用 -webkit-animation 样式而不是 -webkit-animation-duration 样式

Question

当我尝试在 Chrome 中通过 jQuery 2.1.3 更改 -webkit-animation-duration 样式时，它应用了 -webkit-animation 样式，基本上覆盖了之前通过 css 样式表应用的所有动画。

它在 Chrome 和 Firefox 中完美运行(使用非前缀样式)。

这是一个 example .

我发现的唯一解决方法是通过 .attr 设置样式，但这会覆盖我现有的内联样式，并且进行搜索和替换对于我更新它的速度来说过于密集。

这是 jQuery 代码:

$('.mask').css("-webkit-animation-duration", "50s");
$('.filler').css("-webkit-animation-duration", "50s");
$('.spinner').css("-webkit-animation-duration", "50s");

有什么想法吗？

编辑:

我已经确认在使用 javascript 应用样式时会发生同样的事情。它已更新为在示例中使用纯 JS，但这里是代码以防有人更新它:

document.getElementById("pie1").style['-webkit-animation-duration'] = "50s";
document.getElementById("pie2").style['-webkit-animation-duration'] = "50s";
document.getElementById("pie3").style['-webkit-animation-duration'] = "50s";

Answer 1

我能够弄清楚发生了什么。 Safari 将所有动画 css 属性组合到一个速记属性中。解决方案是在通过 jQuery 进行更改时传递其余的动画参数(幸好是静态的)。对于 Safari 来说，这似乎是一件愚蠢的事情，因为它会覆盖任何其他动画参数。