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

Posted 2023-03-06

【中文标题】如何使 CSS 属性动画在 Safari 中像在 Google Chrome 中一样工作？

【英文标题】：How to make CSS property animation work in Safari as it does in Google Chrome?

【发布时间】：2018-06-02 10:55:25

【问题描述】：

我的 CSS 动画有问题。

在我的项目中，我需要将 @keyframes 添加到样式对象，并将动画属性添加到 javascript 的某些 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 中获得的结果？

【问题讨论】：

您是否尝试过为 safari 使用正确的关键字：@-webkit-keyframes anim_name // your animation ...

是的，我做到了。不幸的是，这不是问题

【参考方案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;";