CSS呼吸<按钮>停止文字摇晃

Question

我的click me下方有一个圆形的呼吸按钮,我在这里使用@keyframes按钮呼吸动画 - 到目前为止一切都很好!

但正如你可以看到click me在呼吸动画期间文字正在颤抖.

有没有办法避免这种情况发生？

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) 
}

button.circle {
  --startSize: 65vh;
  --endSize: 85vh;
  width: var(--startSize);
  height: var(--startSize);
  background: teal;
  border-radius: 100%;
  animation-name: breathe;
  animation-play-state: running;
  animation-duration: 4.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
    border: none;

}

@keyframes breathe {
  
  0% {
    width: var(--startSize); 
    height: var(--startSize);
  }
  
  25% {
    width: var(--startSize); 
    height: var(--startSize);
  }

  75% {
    width: var(--endSize);
    height: var(--endSize);
  }
  
  100% {
    width: var(--endSize);
    height: var(--endSize);
  }
}

<a href="https://www.w3schools.com"><button class="circle centered">Click me</button></a>

Answer 1

也许更好的动画方法是transform: scale(...)在::after伪元素上使用.使用此方法,我们可以获得以下好处:

1. 动画不再影响文档流¹.动画,喜欢transform和opacity喜欢width或喜欢的属性height.后者会影响它周围的元素(文档流程).变换纯粹是视觉的 - 它们在放置方面对其他元素没有影响,这意味着提高了性能.
2. 文本与动画分开,这意味着不再有动摇.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) 
}

button.circle {
  width: 65vh;
  height: 65vh;
  border: 0;
  background-color: transparent;
}

button.circle::after {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  display: block;
  background: teal;
  border-radius: 100%;
  animation: breathe 4.5s ease infinite alternate running;
}

@keyframes breathe {
  from { transform: scale(1); }
  to { transform: scale(1.4); }
}

<a href="https://www.w3schools.com"><button class="circle centered">Click me</button></a>

注意:浏览器支持此方法

^{1.我意识到按钮位于中心位置absolute,这意味着它不会影响文档流程.也就是说,这种使用变换制作动画的方法对于任一场景都更加灵活.}