html - 制作线动画加载器

Question

我正在创建一个加载器动画，我已经实现了如下所示:

我希望黑线从左移动 -> 右然后右 -> 左无限移动。现在，它只是朝着一个方向发展。

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
  from {
    left: 300px;
  }
  to {
    left: 0;
  }
}

<div class="loader">
  <div class="blue-line"></div>
</div>

Answer 1

使用 @keyframes 和 % 0/50/100 使用 100%{left: 300px;}/

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  position: relative;
}
.loader .blue-line {
  background: #000;
  border-radius: 10px;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1s infinite;
}
@keyframes line-bounce {
  0%{
    left: 300px;
  }
  50%{
    left: 0;
  }
100%{
 left: 300px;
}
}

<div class="loader">
  <div class="blue-line"></div>
</div>