html - CSS3无限循环动画

Question

我在尝试制作 CSS3 动画时遇到了一些小问题。

我正在尝试制作道路动画，其中线条/标记会移动。现在它可以正常工作，但不是我想要的。

我需要标记从它们的当前位置移动(不是从右侧 - 关键帧使它们来自右侧)，它们会向左移动。我还需要它们不断循环而不是重置，但我不确定该怎么做。

body {
  margin: 0 auto;
}
#road {
  height: 75px;
  background: #666666;
  overflow: hidden;
}
.line {
  width: 150px;
  height: 15px;
  background-color: #cccbcb;
  margin: 30px 75px 0 0;
  display: inline-block;
  -webkit-animation: road infinite linear 4s 0s;
}

@keyframes road {
  0% { transform: translateX(1000%); }
  100% { transform: translateX(0%); }
}

<div id="road">
  <div style="width: 100%;">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

演示链接:https://jsfiddle.net/ke4zzjg3/

有什么想法吗？

Answer 1

你能去掉 div 包装器 (width: 100%;) 吗？您可以将#road 设置为 100% 宽度

您可以在 display:flex 中设置#road，并进行调整，例如方向和环绕的 flex-flow 以及居中的 align-items。

line 元素的宽度为 150px，因此您可以将 translateX 设置为 100% 到 -150%(如 150px)-> 在关键帧结束时，第一行将被隐藏。您还必须在类属性中设置转换属性。

当动画结束时，第二行和没有动画的第一行在同一位置，所以你看不到变化。 :)

在动画属性中根据需要调整道路的速度。如果您想反转线条的方向，只需反转翻译属性即可。

body {
  margin: 0 auto;
  overflow: hidden;
}
#road {
  width: 1000%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  
  height: 75px;
  background: #666666;
  overflow: hidden;
}
.line {
  width: 150px;
  height: 15px;
  background-color: #cccbcb;
  margin: 0 37.5px;
  animation: road infinite linear 2s 0s;
  
  transform: translateX(0%);
}

@keyframes road {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-150%); }
}

<div id="road">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>