html - CSS呼吸<button>阻止文本晃动

我下面有一个圆形的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>

最佳答案

进行动画处理的更好方法可能是在transform: scale(...)伪元素上使用::after。使用这种方法，我们可以得到以下好处:

动画不再影响文档流1。设置动画时，prefer transform and opacity over properties like width or height 。后者将影响其周围的元素(文档流)。转换纯粹是视觉上的-就放置而言，它们对其他元素没有影响，这意味着improved performance。

文本与动画是分开的，这意味着不再晃动。

.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>

注意:Browser support for this method

1.我知道按钮居中并定位在absolute上，这意味着它不会影响文档的开始。也就是说，这种使用变换进行动画处理的方法对于任何一种情况都更加灵活。

关于html - CSS呼吸<button>阻止文本晃动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54097307/