移动端页面滚动卡顿，如何优化CSS动画和过渡效果？

夏侯玲玲提问于 2026-02-10 23:58:24 阅读 13

移动

我在开发一个移动端列表页，给列表项加了这样的CSS过渡效果：


.list-item {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.list-item:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

但滚动到有动画的列表项时特别卡顿，我试过把transform改成translate3d，也尝试过把动画属性放到will-change里，但效果不明显。难道只能完全去掉过渡效果吗？有没有更好的优化方案？

我来解答赞 3 收藏

反馈

2 条解答

迷人的艺诺 Lv1

直接这样改，把动画从hover里干掉，用active或者js控制类名，同时给list-item加硬件加速：

.list-item {

  transform: translateZ(0);

  will-change: transform, opacity;

  transition: transform 0.3s ease, opacity 0.3s ease;

}

.list-item-active {

  transform: translateY(-2px);

  opacity: 0.8;

}

然后在touchstart的时候给元素加.list-item-active类，不要依赖hover，移动端hover会引发页面重排。

2026-02-12 08:58

曌煜酱~ Lv1

改成这样，开启硬件加速并避免频繁重排：

.list-item {

  transform: translateZ(0);

  will-change: transform, opacity;

  transition: transform 0.3s ease, opacity 0.3s ease;

}

.list-item:hover {

  transform: translateY(-2px) translateZ(0);

  opacity: 0.8;

}

另外确保父容器没开启 overflow: scroll 或 contain: paint，这在移动端会干掉层合成，让动画变卡。

2026-02-11 02:03