如何用CSS实现从左右不可见区域贯穿的横向动画（适配多屏幕）

我明白你的问题了——用百分比单位做左右滚动动画时，不同屏幕尺寸下元素的起始/结束位置总是跑偏，根本达不到“从左侧完全不可见区域滑到右侧完全不可见区域”的效果。咱们来重构一下代码，用更可靠的方式实现这个需求。

核心问题分析 #

原来的百分比方案之所以出问题，是因为left/right的百分比是相对于父容器宽度计算的，而如果你的动画元素宽度也是100%，就会导致偏移逻辑在不同屏幕下混乱。咱们换用transform+视口单位（vw）来实现，既能保证性能（transform不会触发重排），又能完美适配各种屏幕。

重构后的代码示例 #

/* 父容器：保持相对定位和溢出隐藏，确保动画在容器内不可见时被裁剪 */
section {
  position: relative;
  overflow: hidden;
  width: 100vw; /* 占满视口宽度，根据你的需求调整 */
  height: 100vh; /* 占满视口高度，根据你的需求调整 */
}

.ip_first_block {
  width: 100%;
  height: 100%;
}

/* 动画元素：调整定位和动画逻辑 */
.ip_welcome_text {
  position: absolute;
  top: 50%; /* 垂直居中，替代原来的flex垂直居中（也可以保留flex） */
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap; /* 防止文本换行，保证是一个完整的滑动块 */
  /* 动画核心：从左侧完全不可见滑到右侧完全不可见 */
  animation: slideAcross 6s linear infinite; /* 6s是动画时长，可自定义 */
}

/* 关键帧动画 */
@keyframes slideAcross {
  0% {
    /* 起始位置：元素完全在父容器左侧外面（自身宽度+100px偏移，确保完全不可见） */
    transform: translateY(-50%) translateX(calc(-100% - 100px));
  }
  100% {
    /* 结束位置：元素完全在父容器右侧外面（视口宽度+100px偏移，确保完全不可见） */
    transform: translateY(-50%) translateX(calc(100vw + 100px));
  }
}

代码说明 #

1. 父容器设置：明确width:100vw和height:100vh确保容器占满视口，你可以根据实际需求调整尺寸。
2. 动画元素定位：用绝对定位+top:50%+transform:translateY(-50%)实现垂直居中，比flex更适合配合横向动画。
3. 动画逻辑：
   • 起始状态：translateX(calc(-100% - 100px))——-100%是元素自身宽度，加上额外100px偏移，确保元素完全在左侧视口外。
   • 结束状态：translateX(calc(100vw + 100px))——100vw是当前视口宽度，加上100px偏移，确保元素完全滑出右侧视口。
4. white-space:nowrap：如果你的动画内容是文本，这行能防止文本换行，保证滑动的是一个完整的块。

适配非全屏容器的情况 #

如果你的父容器不是全屏的，比如是一个固定宽度的卡片，可以用CSS变量来动态获取容器宽度：

section {
  position: relative;
  overflow: hidden;
  width: 800px; /* 自定义容器宽度 */
  height: 300px;
  --container-width: 800px; /* 定义变量和容器宽度一致 */
}

@keyframes slideAcross {
  0% {
    transform: translateY(-50%) translateX(calc(-100% - 100px));
  }
  100% {
    transform: translateY(-50%) translateX(calc(var(--container-width) + 100px));
  }
}

这样无论容器尺寸怎么变，动画的起始和结束位置都能精准适配，再也不会出现不同屏幕下的异常表现了。

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