为什么我的 CSS3 动画在 Safari 中不起作用？

Safari 中 CSS3 动画无法工作

你在使用 CSS3 的动画中遇到了一些问题，这些动画在支持 CSS3 的所有浏览器中都能完美运行，唯独 Safari。你的动画代码如下：

HTML

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS

.landing .board .right {
    /* ... other styles ... */
}
.landing .board .right .key-arm {
    /* ... other styles ... */
}

/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes keyarm {
    /* ... other keyframes ... */
}

@-ms-keyframes keyarm {
    /* ... other keyframes ... */
}

@-o-keyframes keyarm {
    /* ... other keyframes ... */
}

@keyframes keyarm{
    /* ... other keyframes ... */
}

.right .key-arm{
    /* ... other styles ... */
    -webkit-animation: keyarm 8s ease-in-out 0s infinite;
    -moz-animation: keyarm 8s ease-in-out 4s infinite;
    -ms-animation: keyarm 8s ease-in-out 4s infinite;
    -o-animation: keyarm 8s ease-in-out 4s infinite;
    animation: keyarm 8s ease-in-out 0s infinite;
}

正如你所述，这在 Safari 中不起作用，动画没有任何动静。此外，同样只在 Safari 中，“key-arm” div 仅在你调整屏幕大小时才会显示！它存在于 DOM 中，但由于某种原因它不会显示！

你在哪里做错了？

答案

问题出在 @keyframes 上。在 Safari 4 中，@keyframes 不受支持。这很奇怪，因为在同一个页面上，你可以使用 @keyframes 创建一个有效的动画！

支持 @keyframes 的动画代码：

CSS

.board .rays{
    /* ... other styles ... */
}

.board .bottle{
    /* ... other styles ... */
}

/*=== Rays Animation ===*/
@-webkit-keyframes rays{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
    /* ... other keyframes ... */
}

.board .rays{
   -webkit-animation: rays 40s linear 0s infinite;
   -moz-animation: rays 40s linear 0s infinite;
   animation: rays 40s linear 0s infinite;
}

HTML

<div class="board">
    <div class="rays"></div>
    <div class="bottle"></div>
</div>

如果你在 Safari 4 中试用一下（例如在 jsFiddle 中），你就会发现动画无法运行。

解决方法

找到了解决方案。在 Safari 中使用关键帧时，你需要使用完整百分比：

这个将不起作用：

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

这个可以：

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

不知道为什么，但这就是 Safari 的工作方式！

以上是为什么我的 CSS3 动画在 Safari 中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！