css设置按钮心跳收缩后，按钮文字上下抖动，如何解决？

如题，给一个按钮写一个 css 心跳收缩动画后，按钮中的文字会上下抖动，解决方案为   will-change: transform;

代码如下：

// 按键呼吸特效使用 class="pulse"
@keyframes pulse {
  0%{ 
    transform: scale(1);
  }
  25%{ 
    transform: scale(0.95);
  }
  50%{ 
    transform: scale(1);
  }
  75%{ 
    transform: scale(1.05);
  }
  100%{ 
    transform: scale(1);
  }
}

.pulse {
  animation: scale 1.2s infinite linear;
  transform-origin: center center; 
  will-change: transform;
}

 

will-change: transform; 是CSS中的一个属性，用于告知浏览器该元素将进行哪些样式的改变。

当一个元素的属性值改变时，浏览器需要重新计算并渲染这个元素，这可能会导致页面的重绘和重排，从而影响性能。使用 will-change 属性可以提前告诉浏览器哪些属性可能会发生变化，这样浏览器就可以在变化发生之前进行优化，避免不必要的重绘和重排。

然而，需要注意的是，滥用will-change属性可能会导致性能问题，因为浏览器可能会花费资源去准备那些实际上并没有发生的变化。因此，你应该只在确实知道某个属性即将变化，并且这种变化对用户体验有重要影响的情况下使用它。

此外，一旦元素的变化完成，你应该移除will-change声明，以避免浏览器继续为不必要的优化而消耗资源。

最后，虽然will-change在某些情况下可能有助于提高性能，但它并不是解决所有性能问题的万能药。在优化页面性能时，你还应该考虑其他因素，如减少重绘和重排、使用合适的动画曲线、优化图片和脚本加载等。