附加 css3 @keyframes 在 safari 中不起作用

Question

这很难解释，如果我有点啰嗦，请原谅我。

一旦我可以确定将包含动画的元素的宽度，我将使用 js/jquery 创建一个样式以附加到文档标题。例如，我有一些云在天空中滑动，所以我需要知道视口有多宽，以便它们用动画覆盖整个屏幕。一旦我定义了样式变量（样式），我将像这样附加 head 元素：

$('html > head').append(style);

这在 chrome 和 firefox 中完美运行，但 safari 直接拒绝工作。我尝试了一种稍微不同的方式：

$('head').append('<style type="text/css">*@keyframe attributes here*</style>');

再次，在 chrome 和 firefox 中运行良好，但 safari 看不到它。在你问之前，是的，我使用的是 -webkit- 供应商前缀，是的，它列在非供应商特定的 @keyframes 属性之前:)

然后我尝试了 jquery 关键帧插件，结果完全相同。它在 chrome 和 firefox 中完美运行，但不是 safari。但仅限于关键帧。

我已经搜索并搜索过其他任何有此问题的人，但我只能找到无数关于确保以正确的顺序使用正确的供应商前缀的线程（我已经这样做了）。

如果我将关键帧硬编码到 css 文件中，它们可以正常工作，但显然这对我没有好处，因为我无法为动画指定适当的宽度。由于循环动画和偏移（这很复杂），我需要处理宽度（不是 %）。

编辑 这是我附加到标题的样式变量的示例。也许 safari 对格式有特殊要求？

<style>
@-webkit-keyframes charmove { from { -webkit-transform : translateX(0px); } to { -webkit-transform : translateX('+winWidth+'px); }}
@keyframes charmove { from { transform : translateX(0px); } to { transform : translateX('+winWidth+'px); }}
</style>

我也试过了，也没有在转换元素上添加 -webkit- 。结果一样。

Answer 1

好吧，我想通了（还有一些白发！）

事实证明，当您在要制作动画的元素上定义简写动画属性时，safari 不会读取它们。

所以而不是：

-webkit-animation: 5s *name-of-anim* infinite linear;

你必须做的：

-webkit-animation-name: charmove;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

我之前曾尝试过（在这场噩梦的早期），但没有奏效。我想我在测试它时一定做错了什么，因为它现在可以工作了。

希望这篇文章可以帮助其他可能遇到这个问题的人，因为谷歌基本上没有帮助。

:)