关键帧CSS动画

Question

题

如果我有以下示例

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

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

码

 .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; } 

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

Answer 1

如果您采用这种方式，我认为它运行良好。

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

 .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; } 

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

Answer 2

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

 .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;} } 

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