为什么我的CSS动画在移动端卡顿严重？

若溪提问于 2026-03-28 07:46:16 阅读 4

移动

我在做一个移动端的下拉刷新效果，用的是纯CSS动画，但真机测试时特别卡，尤其是低端安卓机。我试过加了transform: translateZ(0)开启硬件加速，还是没改善。

动画代码是这样的：

@keyframes pullDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}
.refresh-indicator {
  animation: pullDown 0.4s ease-in-out;
}

是不是哪里写得不对？或者还有别的优化方式？

CSS3 CSS动画 Grid布局

我来解答赞 7 收藏

反馈

1 条解答

世博🍀 Lv1

检查一下动画时间，0.4秒对低端机可能太短了，试试改成0.6s。另外用 will-change: transform; 替代 translateZ 更优雅。最后记得在animation结束时加个 animation-fill-mode: forwards; 保持最终状态。

@keyframes pullDown {

  0% { transform: translateY(-100%); }

  100% { transform: translateY(0); }

}

.refresh-indicator {

  will-change: transform;

  animation: pullDown 0.6s ease-in-out forwards;

}

移动端优化就是这么回事，多试几次总能找到平衡点。

2026-03-28 08:00