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>

Answer 2

希望这对您有所帮助。如果您想了解更多有关关键帧的信息，请访问下面的链接。谢谢

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

.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: 0px;}
    50%  {left: 300px;}
    100% {left: 0px;}
 
}

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

Answer 3

或者，您只能使用

 50% {
    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 1.6s infinite;
}

@keyframes line-bounce {
  
  50% {
    left: 300px;
  }
  
}

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

Answer 4

一种更简单的方法是将alternate简单地添加到动画中，并如下进行调整以避免使用像素值：

.loader {
  background: #ccc;
  width: 400px;
  height: 10px;
  border-radius: 10px;
  margin:10px 0;
  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 alternate;
}
@keyframes line-bounce {
  from {
    left: 100%;
    transform:translateX(-100%);
  }
  to {
    left: 0;
    transform:translateX(0);
  }
}

<div class="loader">
  <div class="blue-line"></div>
</div>
<div class="loader" style="width:500px">
  <div class="blue-line"></div>
</div>

<div class="loader" style="width:200px">
  <div class="blue-line"></div>
</div>

Answer 5

感谢@לבנימלכה，我只是做了一些更改以使其看起来更平滑。

.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 1.6s infinite;
}

@keyframes line-bounce {
  0% {
    left: 300px;
  }
  50% {
    left: 0;
  }
  100% {
    left: 300px;
  }
}

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

Answer 6

尝试：fiddle

HTML：

<div class="loader_trak">
  <div class="loader_bar">

  </div>
</div>

CSS：

.loader_trak {
      position: relative;
      height: 10px;
      background-color: #ccc;
      width: 250px;
    }

    .loader_bar {
      background-color: #333;
      position: absolute;
      height: 100%;
      width: 80px;
      animation: line-bounce 1s infinite;
    }
    @keyframes line-bounce {
      0% {
        left: 0;
      }
      50% {
        left: calc(100% - 80px);
      }
      100%{
        left: 0;
      }
    }

Answer 7

您可以对同一代码使用以下代码

<html>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <style type="text/css">
    .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: 0px;
      }
      50% {
        left: 300px;
      }
      100% {
        left: 0px;
      }
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="loader">
        <div class="blue-line"></div>
      </div>
    </div>
  </div>

</body>

</html>

制作线条动画加载器

7 个答案: