💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
CSS keyframes用对了，动画丝滑不卡顿
目录
昨天改轮播图，滚动时卡成PPT。 Chrome DevTools一跑，Performance面板直接标红：Layout Thrashing。 气得我删了三遍代码。
问题报错 动画在滚动/点击时突然卡顿，帧率掉到15fps。 控制台没报错，但动画轨迹歪歪扭扭。 典型症状：用户一动页面，动画就抽风。
核心根源 卡顿本质是浏览器反复重排重绘。 错误写法：用left/top/width这类属性。 它们触发Layout——浏览器得重新计算所有元素位置，CPU扛不住。 正确写法：用transform和opacity。 它们触发Composite——GPU直接处理，不碰DOM，丝滑到飞起。
解决代码 错误示范（卡顿）：
/* 别这么写！用left触发Layout */
@keyframes move {
0% { left: 0; } /* 触发重排 */
100% { left: 500px; } /* 每帧都重算 */
}
正确示范（流畅）：
/* 这样写！GPU加速 */
@keyframes move {
0% { transform: translateX(0); } /* 用transform */
100% { transform: translateX(500px); } /* 不触发Layout */
}
对比说明：
- left：每帧都让浏览器重算元素坐标 → CPU狂转
- transform：GPU直接移动合成层 → 流畅如呼吸
避坑总结
最后吐槽： 上个月又踩坑，用width做缩放动画，结果用户手机卡成死机。 现在写动画前先问自己：“这会触发Layout吗？” 答案：99%会。 别让CPU背锅，GPU才是真香。 （昨晚改到凌晨三点，终于顺滑了）
