為什麼我的 CSS3 動畫無法在 Safari 中運作？

CSS3 動畫在 Safari 中無法正確顯示

CSS3 動畫通常可以在大多數現代瀏覽器中無縫運行。但是，您在 Safari 中使用它們時可能會遇到問題，導致缺少移動或渲染不正確。這裡演示了一種這樣的情況，其中鍵臂動畫無法在 Safari 中正確執行。

問題：CSS3 動畫在 Safari 中無法運作

提供的程式碼包括設計用於旋轉元素的 CSS3 動畫規則，但 Safari 無法辨識此動畫。嘗試調整螢幕大小會顯示該元素在 DOM 中的存在，這表示該元素不是導致問題的 DOM 結構。

Safari 的關鍵影格特定行為

我們發現 Safari 在定義關鍵影格時需要使用完整的百分比值。在其他瀏覽器中，可以使用縮寫百分比值，例如“5%”或“10%”。然而，Safari 需要在這種情況下明確使用「5%」和「100%」。

解決方案：新增完整百分比值

透過修改原始值CSS 程式碼包含完整的百分比值，動畫現在可以在 Safari 中正常運作。下面更新的程式碼示範了這一點：

<br>@-webkit-keyframes keyarm {<pre class="brush:php;toolbar:false">0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }

}

有關Safari的附加說明4

要注意的是，早期版本的 Safari（例如 Safari 4）完全不支援「@keyframes」語法。因此，有必要在 Safari 4 中使用供應商特定的動畫前綴。

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