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方向调整＆amp;包裹和对齐中心项目。

线条元素的宽度为150px，因此您可以将translateX设置为100％至-150％（如150px） - ＆gt;在关键帧的末尾，第一行将被隐藏。您还必须在类属性中设置transform属性。

当动画结束时，第二行与没有动画的第一行位于同一位置，因此您无法看到更改。：）

在动画属性中调整道路速度。如果要反转线的方向，只需反转转换属性。

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>

CSS3无限循环动画

1 个答案: