CSS动画工作的Chrome，但不是在Safari

下面的代码工作正常在Chrome，而不是在Safari：CSS动画工作的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%; 

}

我创建了这个小提琴的例子：

我在想什么这里？谢谢！

来源

2014-10-07 Rafouille

并非所有的CSS都适用于所有浏览器？ – jbutler483 2014-10-07 15:54:17

不只是在这里显示的CSS的相关部分...完整的CSS是在小提琴。 – Rafouille 2014-10-07 15:57:16

我的意思是：仅仅因为它在一个浏览器中工作，另一个可能会以不同的方式呈现它。我无法在我的电脑atm上测试它，但试试[this]（http://htmlcsstricks.com/demo/61-css3-animation-effects/css3-wobble-animation.html） – jbutler483 2014-10-07 16:00:30

这是因为您没有在转换百分比上设置完整范围。 Safari要求您指定100％端点。看到这个相关的答案：CSS3 animation not working in safari

来源

2014-10-07 16:43:23 Duncan

非常感谢邓肯，就是这样！我在这里更新了提琴：http://jsfiddle.net/2obx0rvL/4/ – Rafouille 2014-10-07 17:39:53

-3

您只使用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; 

}

来源

2014-10-07 15:55:30 Kommodore

Safari是一个基于webkit的浏览器。 – 2014-10-07 15:56:14

好吧，对不起，那么后。我对safari不太熟悉，这就是为什么我认为它是基于其他方面的。 – Kommodore 2014-10-07 15:59:45

这篇文章应该删除。您提供了您不确定的信息，但无法回答这个问题。 – krummens 2017-04-13 18:48:30

CSS动画工作的Chrome，但不是在Safari

回答

相关问题