关键帧css动画

Question

问题

如果我有以下示例

A-------------B------------C

我如何从中间开始动画（B）然后转到A然后转到B，最后转到C，我做了一个例子但是效果不好。

代码

＆＃13;

＆＃13;

.container {
  display: block;
}
.container .line {
  display: block;
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  display: block;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
}

@keyframes move {
  0% {
    left: 200px;
  }
  25%{
    left: 0px;
  }
  100%{
    left: 400px;
  }
}
.line:after {
  -webkit-animation: move 1s alternate infinite;
  -moz-animation: move 1s alternate infinite;
  -ms-animation: move 1s alternate infinite;
  -o-animation: move 1s alternate infinite;
  animation: move 1s alternate infinite;
}

＆＃13;

<div class="container">
  <div class="line"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你这样做，我认为它运作良好。

我使用alternate代替linear。它使动画更流畅。

＆＃13;

＆＃13;

.container {
  display: block;
}
.container .line {
  display: block;
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  display: block;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
}

@keyframes move {
  0% {
    left: 200px;
  }
  25%{
    left: 0px;
  }
  75%{
    left: 400px;
  }
  100%{
    left: 200px;
  }
}
.line:after {
  -webkit-animation: move linear 1s infinite;
  -moz-animation: move linear 1s infinite;
  -ms-animation: move linear 1s infinite;
  -o-animation: move linear 1s infinite;
  animation: move linear 1s infinite;
}

＆＃13;

<div class="container">
  <div class="line"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以这样做，如果添加linear（因为默认为ease），您将获得类似Fiddle

的内容

＆＃13;

＆＃13;

.container .line {
  height: 1px;
  width: 400px;
  background: red;
}
.line:after{
  content: "";
  height: 20px;
  width: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 0px;
  animation: move 3s infinite;
}

@keyframes move {
  0% {left: 200px;}
  25%{left: 0px;}
  50% {left: 200px;}
  75% {left: 400px;}
  100%{left: 200px;}
}

＆＃13;

<div class="container">
  <div class="line"></div>
</div>

＆＃13;

＆＃13;

＆＃13;