移动端用CSS动画卡顿怎么办？

雯婷提问于 2026-03-31 12:43:11 阅读 4

移动

我在手机上用CSS做了一个简单的滑入动画，但明显感觉卡顿不流畅，试过加transform: translateZ(0)也没啥用，是不是哪里写错了？

这是我的关键代码：

.slide-in {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

我来解答赞 1 收藏

反馈

1 条解答

Top丶颖昕 Lv1

试试把 margin-left 改成 transform，用 translateX 来做位移动画。CSS 动画用 transform 性能会好很多。

.slide-in {

  animation: slideIn 0.5s ease-out;

}



@keyframes slideIn {

  from { transform: translateX(-100px); }

  to { transform: translateX(0); }

}

对了，记得加上 will-change: transform; 这样浏览器能提前优化渲染。累死我了，但应该能解决你的问题。

2026-03-31 13:08