CSS CSS3 动画在 safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9211261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 animation not working in safari
提问by Mauro74
I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:
我有一些 CSS3 动画，它在所有支持 CSS3 的浏览器中都能完美运行，除了 safari。很奇怪不是吗？好的，这是我的代码：
HTML
HTML
<div class="right">
<div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>
CSS
CSS
.landing .board .right {
width: 291px;
height: 279px;
background: url('../images/landing/key-pnl.png');
bottom: 16px;
right: 250px;
position: absolute;
}
.landing .board .right .key-arm {
position: absolute;
left: 44px;
top: 18px;
width: 41px;
height: 120px;
}
/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes keyarm {
0% { -moz-transform: rotate(0deg); }
5% { -moz-transform: rotate(-14deg); }
10% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes keyarm {
0% { -ms-transform: rotate(0deg); }
5% { -ms-transform: rotate(-14deg); }
10% { -ms-transform: rotate(0deg); }
}
@-o-keyframes keyarm {
0% { -o-transform: rotate(0deg); }
5% { -o-transform: rotate(-14deg); }
10% { -o-transform: rotate(0deg); }
}
@keyframes keyarm{
0% { transform: rotate(0deg); }
5% { transform: rotate(-14deg); }
10% { transform: rotate(0deg); }
}
.right .key-arm{
-webkit-transform-origin: 12px 105px;
-moz-transform-origin: 12px 105px;
-ms-transform-origin: 12px 105px;
-o-transform-origin: 12px 105px;
transform-origin: 12px 105px;
-webkit-animation: keyarm 8s ease-in-out 0s infinite;
-moz-animation: keyarm 8s ease-in-out 4s infinite;
-ms-animation: keyarm 8s ease-in-out 4s infinite;
-o-animation: keyarm 8s ease-in-out 4s infinite;
animation: keyarm 8s ease-in-out 0s infinite;
}
Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?
好的，正如我所说，这在 Safari 中不起作用，没有任何移动。
此外，仍然并且仅在 Safari 中，只有在您调整屏幕大小时才会显示键臂 div！它在 DOM 中，但由于某种原因它没有出现！
我究竟做错了什么？
Thanks
Mauro
谢谢
毛罗
UPDATE: Ok from your answers I got that @keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using @keyframes!
更新：好的，从您的回答中我得知 Safari 4 不支持 @keyframes。这很奇怪，因为在同一页面上我有一个使用 @keyframes 的动画！
here's the CSS code:
这是 CSS 代码：
.board .rays{
background: url("../images/landing/rays.gif") no-repeat 0 0 red;
height: 381px;
left: 251px;
opacity: 1;
top: 80px;
width: 408px;
position: absolute;
}
.board .bottle{
background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
bottom: 30px;
height: 405px;
left: 276px;
width: 357px;
z-index: 1;
position:absolute;
}
/*=== Rays Animation ===*/
@-webkit-keyframes rays{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
.board .rays{
-webkit-animation: rays 40s linear 0s infinite;
-moz-animation: rays 40s linear 0s infinite;
animation: rays 40s linear 0s infinite;
}
And the html:
和 html：
<div class="board">
<div class="rays"></div>
<div class="bottle"></div>
</div>
Try it yourself in jsFiddle (if you have Safari 4) and you'll see
在 jsFiddle 中自己尝试一下（如果你有 Safari 4），你会看到
回答by Mauro74
Found the solution. In Safari when you use Keyframes you need to use the whole percentage:
找到了解决办法。在 Safari 中，当您使用关键帧时，您需要使用整个百分比：
this won't work:
这行不通：
@-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
this will:
这会：
@-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
不知道为什么，但这就是 Safari 的工作方式！:)
回答by Frato
I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).
我在 Safari 6 中使用 CSS3 动画时遇到问题，但在 Safari 4 (4.0.5) 中没有。
It appears that the shorthand notation will not work in Safari 4.
似乎速记符号在 Safari 4 中不起作用。
So this won't work :
所以这行不通：
-webkit-animation: rays 40s linear forwards;
But this will work :
但这会起作用：
-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
回答by daleyjem
In situations where you're trying to animate transformon something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:
在您尝试transform在将某个内容注入 DOM 后立即对其进行动画处理的情况下，我不得不添加一个非常简短的延迟，如下所示：
animation: rays 40s linear 0.01s infinite;
animation: rays 40s linear 0.01s infinite;
回答by RAF
@-webkit-keyframes { <- let this symbol to the same line
} - >
This works on iphone 3 ios 6.1.6
with -webkit-prefix on transform and animation
这适用于带有-webkit-转换和动画前缀的iphone 3 ios 6.1.6
