按钮动画卡顿可通过使用transform和@keyframes优化，因transform由GPU加速，避免触发重排重绘；应采用scale、rotate实现动画，配合ease-in-out等缓动函数，并合理设置animation-duration与循环次数，必要时通过will-change启用硬件加速，提升流畅度。

按钮动画卡顿通常是因为动画属性触发了重排或重绘，影响性能。使用 transform 和 @keyframes 能有效提升流畅度，因为 transform 属于合成层操作，由 GPU 加速。

使用 transform 实现旋转缩放

避免直接修改 width、height、top、left 等会引发布局重算的属性。用 transform 替代：

• rotate 控制旋转角度，如 rotate(10deg)
• scale 调整大小，如 scale(1.1)
• 多个变换可用空格分隔：transform: rotate(5deg) scale(1.05)

优化 keyframes 动画曲线

animation-timing-function 使用合适的缓动函数，避免生硬跳变：

• 推荐使用 ease-in-out 或 cubic-bezier(.25,.8,.25,1)
• 过短的 animation-duration（如低于 0.3s）容易造成视觉闪烁
• 循环次数过多（infinite）可能让用户感到烦躁，可按需设置

启用硬件加速提升性能

通过 will-change 或 translateZ 促使浏览器提前创建合成层：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

.button.animated {
  will-change: transform;
  /* 或添加不影响效果的 translateZ(0) */
  /* transform: rotate(5deg) scale(1.05) translateZ(0); */
}

注意：will-change 不宜滥用，仅用于明确频繁变化的元素。

基本上就这些。合理使用 transform + keyframes + 缓动函数，能显著改善动画流畅感，避免页面卡顿。