如何编写代码实现物体从屏幕左侧出现向右移动并从右侧驶出的效果

参考实现思路草图：

核心实现思路 #

用CSS原生@keyframes动画即可实现，不需要引入额外依赖，性能开销极低。

实现步骤 #

• 第一步：搭建基础DOM结构，定义可视视口容器和火车元素
• 第二步：给可视容器设置overflow: hidden，确保火车进出视口时不会显示在容器外
• 第三步：给火车元素设置绝对定位，初始位置放在视口左侧外部
• 第四步：定义位移动画关键帧，控制火车从左向右平移，直到完全离开视口右侧

完整可运行代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>火车驶出动画</title>
  <style>
    /* 可视视口，模拟车站展示区域 */
    .viewport {
      width: 100vw;
      height: 300px;
      border-bottom: 3px solid #666; /* 模拟轨道 */
      position: relative;
      overflow: hidden;
      background: #f0f0f0;
    }
    /* 火车元素 */
    .train {
      width: 200px;
      height: 100px;
      background: #e63946;
      position: absolute;
      bottom: 0;
      /* 初始位置：完全在视口左侧外 */
      transform: translateX(-200px);
      /* 绑定动画：动画时长10s，线性匀速，无限循环（不需要循环就去掉infinite） */
      animation: trainMove 10s linear infinite;
    }
    /* 动画关键帧定义 */
    @keyframes trainMove {
      0% {
        transform: translateX(-200px);
      }
      100% {
        /* 终点位置：完全移动到视口右侧外 */
        transform: translateX(calc(100vw + 200px));
      }
    }
  </style>
</head>
<body>
  <div class="viewport">
    <div class="train"></div>
  </div>
</body>
</html>

参数调整说明 #

• 如果要调整火车移动速度，修改animation属性里的时长即可，数值越小移动越快
• 如果不需要循环播放，删掉animation属性里的infinite参数即可
• 实际使用时可以把.train的纯色背景替换为火车的图片素材，效果和草图完全匹配

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