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>

CSS关键帧动画在Safari上不流畅，但在Chrome上有效

2 个答案: