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%;

}

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

我在这里缺少什么？ THX！

Answer 1

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

Answer 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;

}

CSS动画在Chrome上工作但在Safari上没有

2 个答案: