Html CSS动画在Chrome上工作,但在Safari上不工作
下面的代码在Chrome上运行良好,但在Safari上不起作用:Html CSS动画在Chrome上工作,但在Safari上不工作,html,css,google-chrome,animation,safari,Html,Css,Google Chrome,Animation,Safari,下面的代码在Chrome上运行良好,但在Safari上不起作用: @-webkit-keyframes jiggle { 0% { transform: rotate(-.5deg); -webkit-animation-timing-function: ease-in; } 50% { transform: rotate(1deg); -webkit-animation-timing-function: e
@-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%;
}
我在这把小提琴中创造了一个例子:
我错过了什么?谢谢 您只使用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要求您指定100%端点。请参阅此相关答案:并非所有浏览器都可以使用所有css?不,此处仅显示css的相关部分。。。我的意思是:仅仅因为它在一个浏览器中工作,另一个浏览器可能会以不同的方式呈现它。我不能在我的pc atm上测试它,但是试试你的抖动动画在两种浏览器上都能很好地工作,但是我希望我的动画也能如此。事实上,两种基于webkit的浏览器对它的解释应该大致相同。我并没有要求Safari完全像Chrome一样渲染它,但至少要尝试渲染它!Safari是一款基于webkit的浏览器。好吧,很抱歉发布这篇文章。我不太熟悉safari,这就是为什么我认为它是基于其他的东西。这个帖子应该被删除。你提供了你不确定的信息,这无助于回答问题。非常感谢邓肯,就这样!我在这里更新了小提琴以供参考: