将一个动画的结尾与下一个循环的开头相匹配

Question

我正在为我的 html 制作巴士动画。我将总线设置为好像它来自左端并一直移动到页面的右端。然而，在我下面的代码中，总线一直运行到右侧然后只是传送回左侧进行下一个动画循环。我希望公共汽车的任何部分移动到页面的右端并消失，它会立即出现在左侧并继续移动。我该怎么做？

谢谢你帮助我:)

编辑：这是我想要的图片：Snake on Nokia。如你所见，蛇的头部移动到边界，并立即出现在边界的另一侧，继续移动；直到全部进入右边框。

div {
  position: relative;
  animation-name: travelbus;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
@keyframes travelbus {
  from {
    left: -5%;
  }
  to {
    left: 110%;
  }
}

Answer 1

您可以使用 CSS 转换 translateX 来相对于其自身宽度定位总线。

例如，如果公共汽车位于左侧：0 并且您执行transform: translateX(-100%)，公共汽车将“隐藏”在页面的左侧。

要让它在整个页面上移动，您希望它移动 100vw 加上总线的宽度，使其完全消失在右侧。你可以通过计算来做到这一点：transform: translateX(calc(100vw + 100%))

在动画中使用这些而不是问题中使用的左侧定位，巴士将向右移动穿过页面，消失，然后开始重新出现在左侧。

注意，为了让动作更加均匀和“自然/稳定”，我将动画的计时功能设置为线性而不是默认值。

更新：要求比我最初理解的要复杂一些。当一辆公共汽车开始在右侧消失时，另一辆应该开始出现在左侧。这意味着我们必须做一些额外的事情：

1. 有另一个元素表示总线编号 2（不能拆分元素，因此部分显示在左侧，部分显示在右侧）

2. 在延迟后开始第二辆公共汽车移动 - 延迟是第一辆公共汽车行驶其自身长度加上屏幕宽度所花费的时间。

3. 更改关键帧动画中的 %s，以便公共汽车有时间也行驶其长度之一（因此它们在右侧消失）。

在这个 sn-p CSS 变量中，以 vw 为单位保存行程时间和公共汽车的长度。这些可用于计算第二条总线的延迟时间。但是请注意，关键帧的 % 值需要提前计算，因为 CSS 不允许在此处使用变量。如果总线的长度相对于视口的宽度发生变化，则必须重新计算 %s。

因为我们使用相对单位来表示总线长度，所以动画是响应式的，并且无论视口宽度如何都可以正常工作，当然，总线在较窄的设备上似乎会运行得更慢。

   
   .bus {
     --buslength: 5; /* length of a bus in vw units */
     --time: 6s; /* total journey time of a bus from first appearing on the left to totally disappearing on the right */
     position: absolute;
     left: 0;
     transform: translateX(-100%);
     animation-name: travelbus;
     animation-duration: calc(2 * (var(--time) * ((100 + var(--buslength)) / (100 + (2 * var(--buslength))))));
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     display: inline-block;
     margin: 0;
     padding: 0;
     width: calc(var(--buslength) * 1vw);
     height:  calc((var(--buslength) * 1vw) / 3);
     background-color: red;
   }
   
   .bus:nth-of-type(2) {
     animation-delay: calc(var(--time) * ((100 + var(--buslength)) / (100 + (2 * var(--buslength)))));
   }
   
   @keyframes travelbus {
     0% {
       transform: translateX(-100%);
     }
     55% {
       transform: translateX(calc(100vw + 100%));
     }
     55.01% {
       transform: translateX(-100%);
     }
     100% {
       transform: translateX(-100%);
     }
   }
   
   

   
   <div class="bus"></div>
   <div class="bus"></div>