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

首頁

web前端

css教學

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

Susan Sarandon

Dec 14, 2024 pm 06:08 PM

Why is my CSS3 animation not working in Safari?

Safari 中 CSS3 動畫失效

您遇到了 CSS3 動畫在 Safari 中無效的問題。儘管該動畫在支援 CSS3 的所有其他瀏覽器中都能正常運作，但在 Safari 中卻無法正常運作。以下是您的程式碼：

HTML

<div>

登入後複製

CSS

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}

.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}

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

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

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

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

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

.right .key-arm{
    -webkit-transform-origin: 12px 105px;
       -moz-transform-origin: 12px 105px;  
        -ms-transform-origin: 12px 105px;  
         -o-transform-origin: 12px 105px;  
            transform-origin: 12px 105px;  

   -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 中遇到的問題如下：

動畫無效。

key-arm div 只有在調整螢幕大小時才會顯示。

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

登入後複製

在 Safari 中，關鍵影格是支援的，但有一個限制。在聲明關鍵影格時，您必須使用完整百分比。例如，以下程式碼不會在Safari 中運行：

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

登入後複製

以下程式碼將在Safari 中運行：

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

登入後複製

因此，為了解決您的問題，您需要將keyarm 關鍵畫面更新為：更新後，您的動畫將在Safari 中正常運作。

以上是為什麼我的 CSS3 動畫在 Safari 中不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn