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

【问题标题】：Jquery applying -webkit-animation style instead of -webkit-animation-duration style in SafariJquery 在 Safari 中应用 -webkit-animation 样式而不是 -webkit-animation-duration 样式
【发布时间】：2015-02-25 22:48:57
【问题描述】：

当我尝试在 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";

【问题讨论】：

标签： javascript jquery css safari

【解决方案1】：

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

【讨论】：