javascript - 如何使 CSS 属性动画在 Safari 中像在 Google Chrome 中一样工作？

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 错误/不一致。我能够通过 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;";