下面的代码在 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/
我在这里错过了什么?谢谢!
最佳答案
这是因为您没有设置变换百分比的完整范围。 Safari 要求您指定 100% 端点。请参阅此相关答案:CSS3 animation not working in safari
关于html - CSS 动画适用于 Chrome 但不适用于 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26240148/