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