#container div {
 height: 100px;
 width: 100px;
 position: relative;
 border-radius: 50%;
 animation-name: example;

 animation-iteration-count: infinite;
}

@keyframes example {
  0% {left: 0px; right: 0px;}
  25% {left: 730px; right: 0px;}
  50% {left: 730px; right: 300px;}
  75% {left: 0px; right: 300px;}
  100% {left: 0px; right: 0px;}
}


#red-box {
 background: #ed1c26; 
  position: relative;
 border-radius: 50%;
 animation-name: example;
 animation-duration: 0.7s;
 animation-iteration-count: infinite;
}

#orange-box {
 background: #ff6200; 
  position: relative;
 border-radius: 50%;
 animation-name: example;
 animation-duration: 1s;
 animation-iteration-count: infinite;
}

#yellow-box {
 background: #ffb000; 
  position: relative;
 border-radius: 50%;
 animation-name: example;
 animation-duration: 1.3s;
 animation-iteration-count: infinite;
}

#green-box {
 background: #45a64a; 
  position: relative;
 border-radius: 50%;
 animation-name: example;
 animation-duration: 1.6s;
 animation-iteration-count: infinite;
}

#blue-box {
 background: #17a3b8; 
  position: relative;
 border-radius: 50%;
 animation-name: example;
 animation-duration: 1.9s;
 animation-iteration-count: infinite;
}

#violet-box {
 background: #c738b8; 
  position: relative;
 border-radius: 50%;
 animation-name: example;
 animation-duration: 2.2s;
 animation-iteration-count: infinite;
}