请求实现蓝线左到右、橙线右到左循环消失的CSS动画

没问题！我帮你实现这个循环的线条动画效果，完全符合你要的蓝线从左到右移动消失、接着橙线从右到左移动的需求。下面是完整的代码实现：

HTML 结构 #

<div class="container">
  <div class="line blue"></div>
  <div class="line orange"></div>
</div>

CSS 样式 #

/* 父容器：提供线条的定位基准和可视范围 */
.container {
  position: relative;
  width: 80%; /* 可根据需求调整宽度，比如改成100%占满屏幕 */
  height: 3px; /* 线条的高度，按需调整 */
  margin: 30px auto; /* 居中显示，方便预览 */
  background-color: #f5f5f5; /* 浅灰色背景，让线条更显眼 */
  overflow: hidden; /* 隐藏容器外的线条部分 */
}

/* 线条通用样式：绝对定位覆盖整个容器 */
.line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0; /* 初始状态隐藏，避免页面加载时显示 */
}

/* 蓝线样式及动画 */
.blue {
  background-color: #007bff;
  animation: blueMove 2s ease-in-out infinite;
}

/* 橙线样式及动画 */
.orange {
  background-color: #fd7e14;
  animation: orangeMove 2s ease-in-out infinite;
  animation-delay: 2s; /* 延迟2秒，等蓝线动画完成后再启动 */
}

/* 蓝线动画关键帧：从左外进入 → 填满容器 → 滑出右外消失 */
@keyframes blueMove {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* 橙线动画关键帧：从右外进入 → 填满容器 → 滑出左外消失 */
@keyframes orangeMove {
  0% {
    transform: translateX(100%);
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

关键细节说明 #

• 动画节奏控制：通过animation-delay让橙线在蓝线完成整个动画后再启动，形成“蓝线走完→橙线跟上”的循环效果。
• 视觉流畅度：使用ease-in-out缓动函数让线条的启动和结束更自然，你也可以改成linear实现匀速移动。
• 自定义调整：你可以随意修改以下参数来适配你的需求：
  • 把2s改成其他数值，调整动画的快慢；
  • 修改height改变线条粗细；
  • 替换background-color的值自定义线条颜色；
  • 调整.container的width控制动画的显示范围。

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