Ejemplos básicos animaciones

HTML

<div id="caja"></div>
<div id="caja2"></div>
<div id="caja3"></div>

</div>

CSS

@keyframes cajaAzul{
    0% {
      left: 10px;
    }
    50% {
      left: 200px;
    }
    100% {
      left: 10px;
    }
      }
  @keyframes cajaRoja{
    0% {
      opacity:1;
      transform:rotate(0deg);
    }
    100% {
      opacity:0;
      transform:rotate(360deg);
    }
     }
  @keyframes caja3{
  0%{
    opacity:1;
    transform:rotate(0deg);
    }
100%{
  opacity:0;
  transform:rotate(360deg)
}
}
#caja{
  background-color: blue;
  position: relative;
  width: 100px;
  height: 100px;
  animation: cajaAzul 3s infinite;
}
#caja2{
  background-color: red;
  position: relative;
  width: 100px;
  height: 100px;
  animation: cajaRoja 3s infinite;
  }
#caja3{
  background-color: red;
  position: relative;
  left:210px;
  bottom:100px;
  height:100px;
  width:100px;
  animation: cajaRoja 3s infinite reverse;
}

/*Ahora te toca a ti agregar otra caja roja que empuje a la azul de vuelta para completar la animación.*/