CSS呼吸< button>停止文字晃动

问题描述：

我下面有一个圆形的呼吸，单击我按钮，在这里，我正在使用 @keyframes 为按钮呼吸设置动画-到目前为止一切都很好！

I have a round breathing click me button beneath, here I am using @keyframes to animate the button breathing - so far all good!

但是您可以告诉 click me 在呼吸动画过程中文本发抖.

But as you can tell the click me text is shaking during the breathing animation.

有办法避免这种情况发生吗?

Is there a way to avoid this from happening?

.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(...):在伪元素之后.使用这种方法，我们可以得到以下好处:

Perhaps a better way to animate this would be to use transform: scale(...) on the ::after pseudo-element. Using this method we get the following benefits:

动画不再影响文档流¹.制作动画时，首选 transform 和 opacity 以及 width 或 height 之类的属性.后者将影响其周围的元素(文档流).转换纯粹是视觉上的-不会影响其他元素的位置，这意味着性能提高.
文本与动画是分开的，这意味着不再晃动.

The animation no longer affects document flow¹. When animating, prefer transform and opacity over properties like width or height. The latter will affect the elements around it (the document flow). Transforms are purely visual - they have no affect on other elements in terms of placement, which means improved performance.
The text is separate from the animation which means no more shakiness.

.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 ，这意味着它不会影响文档的开始.也就是说，这种用于转换的动画方法在任何一种情况下都更加灵活.}

^{1. I realize the button is centered and positioned absolute which means it isn't affecting document flow to begin with. That said, this method of animating with transforms is more flexible for either scenario.}

CSS呼吸< button>停止文字晃动

相关推荐