為什麼我的 CSS3 動畫在 Safari 中不起作用？-css教學-PHP中文網

為什麼我的 CSS3 動畫在 Safari 中不起作用？

Patricia Arquette

發布： 2024-11-29 21:04:11

原創

900 人瀏覽過

Why Doesn't My CSS3 Animation Work in 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;
}

登入後複製

CSS

如你所述，這在Safari 中不起作用，動畫沒有任何動靜。此外，同樣只在 Safari 中，「key-arm」 div 僅在你調整螢幕大小時才會顯示！它存在於 DOM 中，但由於某種原因它不會顯示！你在哪裡做錯了？

答案

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

支援@keyframes 的動畫程式碼：

.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;
}

登入後複製

CSS

<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中文網其他相關文章！