CSS动画在Chrome上可以工作，但在Safari上无法工作

Question

以下代码在Chrome中可以正常运行，但是在Safari上无法运行：

@-webkit-keyframes jiggle {
    0% {
        transform: rotate(-.5deg);
        -webkit-animation-timing-function: ease-in;
    }
    50% {
        transform: rotate(1deg);
        -webkit-animation-timing-function: ease-out;
    }

}

.animated_container {
    -webkit-animation-name: jiggle1;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 40%;
    -webkit-animation-duration: 0.21s;
    -webkit-animation-delay: -0.43s;
    animation-name: jiggle1;
    animation-iteration-count: infinite;
    transform-origin: 50% 40%;

}

我在这个fiddle中创建了一个例子：http://jsfiddle.net/2obx0rvL/。 请问我还缺少什么？谢谢！

- Rafouille

---

并非所有的CSS样式都适用于所有的浏览器？ - jbutler483

这里仅显示了相关的CSS内容...完整的CSS在fiddle中。 - Rafouille

我的意思是：仅仅因为它在一个浏览器中可以运行，另一个浏览器可能会呈现不同的效果。我现在无法在我的电脑上测试它，但可以尝试使用此链接：http://htmlcsstricks.com/demo/61-css3-animation-effects/css3-wobble-animation.html - jbutler483

你的摆动动画在两个浏览器上都可以正常工作，但我本来也期望我的动画也能一样。事实是，两个基于Webkit的浏览器应该会以大致相同的方式解释它。我并不要求Safari像Chrome一样精确地渲染它，但至少要尝试渲染它！ - Rafouille

Answer 1

这是因为你没有在转换百分比上设置完整的范围。Safari要求你指定100％的端点。请参阅此相关答案：CSS3动画在Safari中不起作用。

- Duncan

---

非常感谢 Duncan，就是这样！我在这里更新了 fiddle 以供参考：http://jsfiddle.net/2obx0rvL/4/。 - Rafouille

Answer 2

你只使用了webkit前缀。你需要重新编写代码，去掉webkit前缀，这样其他浏览器如Safari、Internet Explorer或Firefox也能够使用它。

@-webkit-keyframes jiggle {
0% {
    transform: rotate(-.5deg);
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
50% {
    transform: rotate(1deg);
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
}

}

.animated_container {
    -webkit-animation-name: jiggle1;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 40%;
    -webkit-animation-duration: 0.21s;
    -webkit-animation-delay: -0.43s;
    animation-name: jiggle1;
    animation-iteration-count: infinite;
    transform-origin: 50% 40%;
    animation-duration: 0.21s;
    animation-delay: -0.43s;

}

-

---

Safari 是一个基于 WebKit 的浏览器。 - Paulie_D

好的，那我很抱歉发了这个帖子。我对Safari不是很熟悉，所以我以为它是基于其他东西的。 - undefined

这篇帖子应该被删除。你提供了一些你不确定的信息，这并没有帮助回答问题。 - krummens