CSS 關鍵幀動畫在 Safari 上不流暢，但在 Chrome 上有效

Question

我正在嘗試為按鈕添加平滑的脈動邊框，它在 Chrome 上運行良好，但動畫不流暢，但您可以看到動畫的離散步驟。 從其他 StackOverflow 問題來看，這可能是一個性能問題，需要以不同的方式解決。 只是想確保我沒有忽略當前方法的任何內容。

它基本上是這樣的：

 .pulse { border-radius: 7.5px; animation: border-pulsate 2s infinite; } @keyframes border-pulsate { 0% { box-shadow: 0 0 0 1px blue; } 50% { box-shadow: 0 0 0 3px blue; } 100% { box-shadow: 0 0 0 1px blue; } }

 <div> <span class="pulse">Pulse</span> </div>

Answer 1

我在 Safari 上遇到了同樣的問題，但關於圖像動畫。

在論壇上沖浪使我優化了我的代碼。 似乎Safari在為具有陰影且“動態”的東西制作動畫時遇到了一些問題。

我通過將邊框作為圖像上傳，在線壓縮然后上傳它找到了解決方案。

得到了 Safari 比 Chrome 和 Firefox 更流暢的結果。

Answer 2

感謝@RickardElimää 的提示，我通過使用偽元素並為其不透明度設置動畫來實現這一點：

 .pulse { position: relative; display: inline-block; border-radius: 7.5px; box-shadow: 0 0 0 0px blue; } .pulse::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; opacity: 0; border-radius: 7.5px; box-shadow: 0 0 0 3px blue; animation: border-pulsate 2s infinite; } @keyframes border-pulsate { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

 <div> <span class="pulse">Pulse</span> </div>