Safari 中 CSS3 動畫無法工作

你在使用 CSS3 的動畫中遇到了一些問題，這些動畫在支持 CSS3 的所有瀏覽器中都能完美運(yùn)行，唯獨(dú) 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 僅在你調(diào)整屏幕大小時才會顯示！它存在于 DOM 中，但由于某種原因它不會顯示！

你在哪里做錯了？

答案

問題出在 @keyframes 上。在 Safari 4 中，@keyframes 不受支持。這很奇怪，因為在同一個頁面上，你可以使用 @keyframes 創(chuàng)建一個有效的動畫！

支持 @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 中），你就會發(fā)現(xiàn)動畫無法運(yùn)行。

解決方法

找到了解決方案。在 Safari 中使用關(guān)鍵幀時，你需要使用完整百分比：

這個將不起作用：

@-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 中不起作用？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！