按钮动画卡顿可通过使用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 促使浏览器提前创建合成层：
立即学习“前端免费学习笔记（深入）”；
.button.animated {
will-change: transform;
/* 或添加不影响效果的 translateZ(0) */
/* transform: rotate(5deg) scale(1.05) translateZ(0); */
}注意：will-change 不宜滥用，仅用于明确频繁变化的元素。
基本上就这些。合理使用 transform + keyframes + 缓动函数，能显著改善动画流畅感，避免页面卡顿。
