<div id="ball1"></div>
<div id="ball2"></div>
<div id="ball3"></div>
@keyframes move {
from {
left: 0px;
}
to {
left: 300px;
}
}
div {
height: 100px;
width: 100px;
background: orange;
border-radius: 50%;
margin: 10px 0;
position: relative;
animation-name: move;
animation-duration: 5s;
}
#ball1 {
animation-fill-mode: forwards;
}
#ball2 {
animation-fill-mode: backwards;
}
#ball3 {
animation-direction: both;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.