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文件中它们工作正常，但显然这对我没有好处，因为我无法指定动画的正确宽度。因为循环动画和偏移（它很复杂），我需要处理宽度（而不是％）。

修改的这是我附加到标题的样式var的示例。也许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>

我也试过了，也没有在transform元素上添加-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;

我曾经尝试过（早在这个噩梦中），但它没有奏效。我想我在测试它时必须做错了，因为它现在正在工作。

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

：）

附加css3 @keyframes不会在safari中工作

1 个答案: