@keyframes example {
  0% {left: 0px; top: 0px;}
  25% {left: 730px; top: 0px;}
  50% {left: 730px; top: 300px;}
  75% {left: 0px; top: 300px;}
  100% {left: 0px; top: 0px;}
}
#container div {
 height: 100px;
 width: 100px;
 border-radius: 60%;
 margin: auto;
 margin-bottom: 10px; 
}

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

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

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

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

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

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