/* @-moz-keyframes animacao-caixa {
  from {
    background: red;
    border-radius: 0px;
  }
  to {
    background: blue;
    border-radius: 300px;
  }
}
@-webkit-keyframes animacao-caixa {
  from {
    background: red;
  }
  to {
    background: blue;
  }
} */
@keyframes animacao-caixa {
  from {
    background: red;
    border-radius: 0px;
    top: 0;
    left: 0;
  }
  to {
    background: blue;
    border-radius: 300px;
    top: 200px;
    left: 200px;
  }
}

#caixa {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
  animation: animacao-caixa; /*Inicia a animação*/
  animation-duration: 5s; /*tempo da animação*/
  animation-delay: 3s; /*tempo de espera para iniciar a animação*/
  animation-iteration-count: 2; /*quantidade de repetições da animação*/
  animation-direction: alternate; /*alterna a animação de from to para to from*/

  /*Devemos utilizar os comandos de compatibilidade para todos os parametros de animation*/
  /*A animação pode ser feita em uma unica linha com a seguinte notação*/
  /*      animation: animacao-caixa 5s 3s 2 alternate;*/
}