<style>
.system {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.buggie {
  position: absolute;
  width: 50%;
  height: 50%;
  scale: 50%;
  opacity: 0;
  background: url(https://serenityos.org/buggie.png) no-repeat left center;
  background-size: contain;
  animation: buggie 10s cubic-bezier(0.1, -0.6, 0.2, -0.2) infinite;
}
.offset-0 { animation-delay: 0.9s; }
.offset-1 { animation-delay: 1.7s; }
.offset-2 { animation-delay: 3.5s; }
.offset-3 { animation-delay: 4.3s; }

.ladyball {
  position: absolute;
  width: 50%;
  height: 50%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/LadyBall-Minerva.png/240px-LadyBall-Minerva.png) no-repeat left center;
  scale: 50%;
  animation: ladyball 9s ease-in-out infinite;
}
@keyframes buggie {
  0% { transform: translateX(0vw); opacity: 1; }
  50% { transform: translateX(100vw); opacity: 1; }
  100% { transform: translateX(0vw); opacity: 1; }
}
@keyframes ladyball {
  0% { transform: translateX(0vw); }
  50% { transform: translateX(100vw); }
  100% { transform: translateX(0vw); }
}
</style>

<div class=system>
  <div class="buggie offset-0"></div>
  <div class="buggie offset-1"></div>
  <div class="buggie offset-2"></div>
  <div class="buggie offset-3"></div>
  <div class="ladyball"></div>
</div>