Transición entre colores con animación

¡HOLA!
¿qué tal?

En webintenta nos muestran la posibilidad de crear algunas animaciones sin Javascript o Flash. 

El ejemplo que vemos es el resultado de una transición entre colores y una animación rotando una capa y escalándola. 

.circulo { display:table-cell; border-radius: 50px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 height:100px;
 width:100px;
 text-align:center;
 vertical-align:middle; }

.circulo span{
color:#000;
 font-family:Arial, Helvetica, sans-serif;
 font-size:21px;
}

/* Para navegadores webkit */
@-webkit-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}

/* Para firefox */
@-moz-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
 0% {-moz-transform:scale(1) rotate(0deg);}
 50% {-moz-transform:scale(1.5) rotate(180deg);}
 100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo {
-webkit-animation:cambiar_color 8s linear 1;
 -moz-animation:cambiar_color 8s linear 1;
 -webkit-animation:rotar 4s infinite;
 -moz-animation:rotar 4s infinite;
}

<div class="circulo">
¡HOLA!<br /> ¿qué tal?</div>