#test {
  color: gray;
}

h2 {
 text-align: center;
}

.green {
  position: absolute;
  bottom: 200px;
text-align: center;
line-height: 40px;
  width: 100px;
  height: 40px;
  background-color: green;
  border-radius: 4%;

  animation: fly-green-x 16s infinite;
}

.red {
  position: absolute;
  bottom: 100px;
//left:-100px;
text-align: center;
line-height: 40px;
  width: 100px;
  height: 40px;
  background-color: red;
  border-radius: 4%;
opacity: 0;
animation-delay: 5s;
  animation: fly-red-x 16s 4s infinite;
}

.platform {
  position: absolute;
  bottom: 147px;
//left:-100px;
  width: 200px;
  height: 40px;
text-align: center;
line-height: 40px;
  background-color: transparent;
border: 2px solid #ccc;
  border-radius: 4%;
}

.neo {
position: absolute;
bottom: 170px;
left: 160px; 
width: 10px;
height: 10px;
background: green;
animation: neo 16s 9s;
opacity: 0;
}

.neo2 {
position: absolute;
bottom: 160px;
left: 160px;
width: 10px;
height: 10px;
background: orange;
animation: neo2 8s 30s;
opacity: 0;
}

.neo2_ {
   position: absolute;
  bottom: 160px;
left: 160px;
width: 10px;
height: 10px;
background: orange;
animation: neo2 8s;
opacity: 1;
}

.main {
position:relative;
overflow: hidden;
width:250px;
height: 240px;
margin: 0 auto;
background: transparent;
}

@keyframes fly-green-x {

0% {
  transform: translateX(-100px);
}

40% {
  transform: translateX(100px);
}

50% {
  transform: translateX(100px);
}

100% {
  transform: translateX(800px);
  }
}

@keyframes fly-red-x {

0% {
  transform: translateX(400px);
opacity: 1;
}

50% {
  transform: translateX(70px);
opacity: 1;
}

100% {
  transform: translateX(-700px);
  }
}

@keyframes neo {

0% {
  transform: translateX(400px);
opacity: 1;
}

50% {
  transform: translateX(20px); //120
opacity:1
}

98% {
//transform: translateX(-20px);
  transform: translateY(-40px);
opacity: 0;
  }

100% {
   opacity: 0;
}

}

@keyframes neo2 {

0% {
  transform: translateX(400px);
opacity:1
}

50% {
  transform: translateX(20px);
opacity:1
}

100% {
  transform: translateY(-20px);
  }

}