CSS 动画在 Chrome 上工作，但在 Safari 上不工作

Posted 2023-03-06

【中文标题】CSS 动画在 Chrome 上工作，但在 Safari 上不工作

【英文标题】：CSS Animation working on Chrome but not on Safari

【发布时间】：2014-12-02 02:59:23

【问题描述】：

下面的代码在 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%;

我在这个小提琴中创建了一个例子： http://jsfiddle.net/2obx0rvL/

我在这里缺少什么？谢谢！

【问题讨论】：

不是所有的 css 都适用于所有浏览器？

这里不只显示css的相关部分...完整的css在小提琴中。

我的意思是：仅仅因为它在一个浏览器中工作，另一个可能会以不同的方式呈现它。我无法在我的 pc atm 上对其进行测试，但请尝试 this

您的摆动动画在两种浏览器上都可以正常工作，但我希望我的动画也是如此。事实是，两个基于 webkit 的浏览器应该或多或少地以相同的方式解释它。我不要求 Safari 像 Chrome 一样渲染它，但至少尝试渲染它！

【参考方案1】：

这是因为您没有设置转换百分比的完整范围。 Safari 要求您指定 100% 端点。请参阅此相关答案：CSS3 animation not working in safari

【讨论】：

非常感谢邓肯，就是这样！我在这里更新了小提琴以供参考：jsfiddle.net/2obx0rvL/4

【参考方案2】：

您只使用 webkit.prefix。您必须重新编写不带 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 的浏览器。

好的，那么抱歉这个帖子。我对 safari 不太熟悉，这就是为什么我认为它是基于其他东西的。

这篇文章应该被删除。您提供了您不确定的信息，它无助于回答问题。