如何在Safari中使用CSS属性动画，就像在谷歌浏览器中一样？

Question

我有CSS动画的问题。

在我的项目中，我需要通过JavaScript将@keyframes添加到样式对象和动画属性到某些DIV的样式。

<div class="a1" style="animation: d 3.2s linear infinite;">
  <div class="b1" style="animation: e 3.2s linear infinite;"></div>
</div>

这是一个任务的例子：https://jsfiddle.net/gcfzf8q4/5/

此示例在Google Chrome中正常运行。

在Safari（版本9之后）中，绿色矩形不会移动或以奇怪的轨迹移动。

题

如何实现我在Safari中使用Chrome获得的结果？

Answer 1

这似乎是一个奇怪的Safari bug /不一致。通过JavaScript而不是HTML设置div的动画样式，我能够解决这个问题。这里的关键是你通过进行appendChild调用来告诉浏览器在定义动画之后检查动画。

// ... omitted some code for length, see jsfiddle in question ...

var style = document.createElement('style');
document.body.appendChild(style);
style.appendChild(rule1);
style.appendChild(rule2);

var a1 = document.getElementsByClassName("a1")[0];
var b1 = document.getElementsByClassName("b1")[0];
a1.style = "animation: d 3.2s linear infinite;";
b1.style = "animation: e 3.2s linear infinite;";