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>