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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.