I am trying to add a smooth pulsating border to a button and it works fine on Chrome but the animation is not smooth but you can see the discrete steps of the animation. From other StackOverflow questions it looks like this might be a performance issue and needs to be solved differently. Just trying to make sure I am not overlooking anything with the current approach.

It basically looks like this:

```css
.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;
  }
}
```

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