移动端动画缓动函数在iOS和Android表现不一致怎么办？

姿言提问于 2026-01-30 23:16:27 阅读 46

移动

用CSS cubic-bezier写了个弹跳动画，iOS上很流畅但Android卡成PPT，搞不懂为啥差距这么大。试过把ease-in-out改成cubic-bezier(0.25, 0.1, 0.25, 1)，安卓还是60帧都跑不满

代码是这样的：


.bounce-animation {
  animation: bounce 1.5s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-30px); }
  50% { transform: translateY(-15px); }
  80% { transform: translateY(-22px); }
}

用开发者工具模拟安卓设备也复现了，但换成linear缓动反而更顺…是不是参数设置有问题？

移动端动画缓动函数

我来解答赞 3 收藏

反馈

1 条解答

开发者世杰 Lv1

安卓机上的动画卡成PPT，这问题我太熟悉了。CSS动画在安卓上的表现确实容易受GPU渲染和缓存机制的影响，优化一下就能好很多。

你现在的代码虽然写得没问题，但安卓对复杂变换的处理效率不高。建议改用will-change属性提前通知浏览器这个元素会动，让它提前做好准备：

.bounce-animation {

  animation: bounce 1.5s infinite;

  will-change: transform; /* 加这一行 */

}

@keyframes bounce {

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

  20% { transform: translateY(-30px); }

  50% { transform: translateY(-15px); }

  80% { transform: translateY(-22px); }

}

另外，你发现linear更顺其实是因为线性动画计算简单，而cubic-bezier会让安卓算得更吃力。不过加了will-change后，你的贝塞尔曲线也能跑得很流畅。

如果还卡，再试试把动画移到伪元素上，或者用requestAnimationFrame手动控制。实在不行就降级到简单的淡入淡出吧，性能总是第一位的。

2026-01-31 06:04