移动端CSS滑动动画问题：右侧滑入致浏览器视口撑开，求解决方案

嘿，我太懂你这个痛点了！移动端做右侧滑入动画时，元素初始位置在视口外很容易触发横向滚动，把视口撑开，直接导致动画失效——我之前做项目也踩过这个坑。给你两个简单有效的解决方案：

1. 锁定横向视口，禁止溢出滚动 #

首先给页面的根容器（比如body或者最外层的wrapper）加上这个样式：

body {
  overflow-x: hidden;
}

这个设置会把所有超出视口宽度的横向内容隐藏，不会触发横向滚动条，也就不会撑开视口了。如果你的页面本来就不需要横向滚动，这个方案完全安全，不会影响其他功能。

2. 用transform替代传统定位，精准控制初始位置 #

之前你可能是用left/right这类属性来设置元素初始位置，这类属性会触发浏览器重排，而且容易受父元素影响导致位置计算错误。换成transform: translateX()来控制，不仅性能更好，还能精准基于视口定位：

比如右侧滑入的动画可以这么写：

/* 右侧滑入的元素类 */
.jaeger-right {
  animation-duration: 3s;
  animation-name: slidein-right;
  animation-delay: 1.0s;
  animation-fill-mode: backwards;
  /* 确保元素是定位元素，transform生效更稳定 */
  position: relative;
}

@keyframes slidein-right {
  from {
    /* 初始位置：向右偏移整个视口宽度，完全在屏幕外 */
    transform: translateX(100vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

100vw代表当前视口的宽度，不管页面有没有其他元素，这个值都是精准的，元素初始位置肯定在右侧屏幕外，再配合overflow-x: hidden，就不会出现视口被撑开的问题了。

你可以把这两个方案结合起来用，在iPhone尺寸下测试应该就能解决动画失效的问题啦！

内容的提问来源于stack exchange，提问作者Green