Html CSS关键帧动画在Safari上不平滑，但在Chrome上有效

我试图添加一个平滑的脉动边界到一个按钮，它在Chrome上运行良好，但动画并不平滑，但你可以看到动画的离散步骤。从其他StackOverflow问题来看，这可能是一个性能问题，需要以不同的方式解决。只是想确保我没有忽略当前方法中的任何内容

基本上是这样的：

.pulse{
边界半径：7.5px；
动画：边界脉动2s无穷大；
}
@关键帧边界脉动{
0% {
长方体阴影：0 1px蓝色；
}
50% {
长方体阴影：0 3px蓝色；
}
100% {
长方体阴影：0 1px蓝色；
}
}

脉搏

我对Safari也有同样的问题，但是关于图像动画

在论坛上冲浪让我优化了我的代码。似乎Safari在设置有阴影且“动态”的东西的动画时遇到了一些问题

我找到了解决方案，将边框作为图像上传，在线压缩，然后上传

---

得到的结果是Safari比Chrome和Firefox更流畅。

我对Safari也有同样的问题，但关于图像动画

在论坛上冲浪让我优化了我的代码。似乎Safari在设置有阴影且“动态”的东西的动画时遇到了一些问题

我找到了解决方案，将边框作为图像上传，在线压缩，然后上传

---

Safari比Chrome和Firefox更流畅。

多亏@RickardElimää的提示，我通过使用伪元素并设置其不透明度的动画来实现这一点：

.脉搏{
位置：相对位置；
显示：内联块；
边界半径：7.5px；
盒影：0像素蓝色；
}
.脉搏：：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：''；
不透明度：0；
边界半径：7.5px；
长方体阴影：0 3px蓝色；
动画：边界脉动2s无穷大；
}
@关键帧边界脉动{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

脉搏

多亏@RickardElimää的提示，我通过使用伪元素并设置其不透明度的动画实现了这一点：

.脉搏{
位置：相对位置；
显示：内联块；
边界半径：7.5px；
盒影：0像素蓝色；
}
.脉搏：：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：''；
不透明度：0；
边界半径：7.5px；
长方体阴影：0 3px蓝色；
动画：边界脉动2s无穷大；
}
@关键帧边界脉动{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

脉搏

永远不要设置阴影动画，因为这是一个性能问题。有两个元素（一个内联块，它是来自：：before的伪元素）可以投射阴影，并为它们的不透明度设置动画。永远不要为阴影设置动画，因为这是一个性能问题。有两个元素（一个内联块，它是来自：：before的伪元素）可以投射阴影，并为它们的不透明度设置动画。