Keyframe css animation

Question

Question

let's if i have the following example

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

how i can start an animation from the middle ( B ) then it go to A then to B and finaly it go to C , i made an example but it's not working good.

Code

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

NiZa · Accepted Answer · 2016-03-23 15:34:34Z

If you do it this way, I thinks it's working well.

In stead of alternate I did use linear. It makes the animation smoother.

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

Nenad Vracar · Accepted Answer · 2016-03-23 15:43:13Z

You could do it like this, also if add linear (because default is ease) you will get something like this 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>

Collectives™ on Stack Overflow

Keyframe css animation

Question

Code

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Question

Code

2 Answers 2

Comments

Comments

Related