移动端CSS动画导致滚动卡顿，如何优化性能？

Designer°素红提问于 2026-01-26 09:07:23 阅读 26

移动

我在手机端用CSS transform做了一个元素缩放动画，但发现页面滚动时会出现明显卡顿。之前试过给动画元素加will-change: transform，但没太大改善，反而感觉更卡了？

代码大概是这样写的：<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-css">.box {
  transition: transform 0.3s;
  will-change: transform;
}
.box:hover {
  transform: scale(1.1);
}</code></code></pre>

用Chrome开发者工具模拟移动端测试时，发现 compositor layer 的渲染帧率只有20多，是不是因为动画元素没有独立成层？或者还有其他优化点没考虑到？

CSS3 Grid布局

我来解答赞 12 收藏

反馈

1 条解答

银银酱~ Lv1

你这个问题确实挺常见的，移动端CSS动画性能优化是个坑。先说结论，will-change用得没问题，但不是银弹，还得配合其他手段。

按照规范和最佳实践，你可以试试以下几点：

1. 确保动画只操作 transform 和 opacity，避免触发布局或重绘。你代码里已经用了 transform: scale()，这点没错。
2. 强制独立成层，虽然加了 will-change: transform，但有时候浏览器不一定会乖乖分层。可以再加个 backface-visibility: hidden 或者 translateZ(0) 提示浏览器创建新图层。
3. 检查是否有多余的 CSS 样式干扰，比如 box-shadow、filter 这种会触发 GPU 渲染的属性，可能会导致性能下降。
4. 如果还是卡，考虑用 JavaScript 配合 requestAnimationFrame 手动控制动画，而不是单纯依赖 CSS 动画。

给你一个优化后的例子：

.box {

  transition: transform 0.3s;

  will-change: transform;

  backface-visibility: hidden; /* 加这个 */

  transform: translateZ(0); /* 再加这个 */

}

.box:hover {

  transform: scale(1.1);

}

最后提醒一下，will-change 虽然是个好东西，但也不能滥用，毕竟它会提前分配资源。如果页面里这种动画元素太多，反而可能适得其反。

实在不行就用 Chrome 的 Performance 工具再深入分析下渲染瓶颈吧，开发这玩意儿本来就是不断调试的过程。

2026-01-29 19:25