AOS动画在移动端不生效是怎么回事？

绍轩🍀 提问于 2026-03-12 22:25:20 阅读 4

交互

我用AOS（Animate On Scroll）给页面加了滚动动画，PC上一切正常，但一到手机上就完全没效果，元素直接显示，没有淡入或滑动。我试过加data-aos-duration和data-aos-delay都没用，也确认了AOS.init()调用了。

是不是移动端需要额外配置？或者我的CSS有冲突？下面是相关样式：

.feature-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos] {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

我来解答赞 1 收藏

反馈

1 条解答

___泉润 Lv1

问题找到了，就是你这段CSS搞的鬼：

[data-aos] {

  opacity: 1 !important;

  transform: translateY(0) !important;

}

这段代码直接把所有带data-aos属性的元素强制显示出来了，完全绕过了AOS的动画逻辑。AOS本身是通过给元素添加class或者data属性来控制动画的，结果被你这行CSS直接一棍子打回原形。

PC端正常移动端不行，可能是因为PC端滚动时AOS的动画类能正常切换，而你这段CSS在移动端优先級更高，直接把动画效果干掉了。解决办法很简单：删掉这个[data-aos]的样式，或者用更具体的选择器。如果你需要控制动画duration什么的，直接在HTML标签上用data-aos-duration属性就行，别在CSS里硬编码覆盖。

另外你前面那个初始状态也写得有点多余：

.feature-card {

  opacity: 0;

  transform: translateY(20px);

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

}

AOS会自动处理元素的初始隐藏和动画，不需要你自己写transition。删掉这段，让AOS全权负责就行。

总结：把你写的这两段CSS都删掉，只保留AOS初始化代码，移动端应该就正常了。

2026-03-12 22:26