html - CSS 动画在 Chrome 上工作,但在 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: 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/

相关文章:

javascript - 如何将 if-else 语句更改为切换语句?

jquery - droppable 不起作用后调整大小

javascript - 使用 Javascript 在某些 HTML 页面上添加侧边栏和更改填充

javascript - Moment.js:无法读取未定义的属性“defineLocale”

php - PHP自动缩小。有没有?

google-chrome - 更改 chrome 中给定 url 的 http 响应状态代码

java.lang.IllegalAccessError : tried to access method com. google.common.util.concurrent.SimpleTimeLimiter with Selenium ChromeDriver Chrome with Java

google-chrome - gmail api返回查询参数之外的电子邮件

javascript - 获取元素内容而不在Polymer中的页面上显示

html - 使用哪个 float 右侧并仅使用 css 覆盖整个页面?