CSS呼吸<button>停止文本抖动

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属性来对按钮进行居中。我使用网格属性将一个JSFiddle放在一起，将按钮水平和垂直地放在中心，这样就可以阻止文本的抖动。

​

body,
html {
  height: 100%;
  display: grid;
}

.circle-outer {
  margin: auto;
  text-align: center;
}

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);
  }
}

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

​

还有一个工作例子：

https://jsfiddle.net/WebDevelopWolf/7ujm2L5v/11/