#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;}
  40% {left: 750px; right: 300px;}
  100% {left: 0px; right: 0px;}
  0% { opacity: 0; transform: translateY(0px); }
  20%{ opacity: 1;}
  100% { opacity: 1; transform: translateY(650px); }
  0% { opacity: 0; transform: translateY(0px); }
  20%{ opacity: 1;}
  100% { opacity: 1; transform: translateY(650px); }
}


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

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

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

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

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

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