Animación múltiple con animation y keyframes CSS3

Con CSS3 se pueden crear animaciones múltiples a través de las propiedades @keyframes y animation, @keyframes es la propiedad que almacena los cambios o efectos que serán realizados sobre el elemento seleccionado, permite listar los sucesos en porcentajes es decir que ocurrirá cuando el proceso de animación se encuentre en el 25%, o el 30%, o el 50%, ..., a la propiedad @keyframes se le asigna un alias que puede ser llamado a través de animation en el elemento seleccionado.

No es Compatible con Internet Explorer.

Ejemplo:

#elemento
{
 width: 100px;
position: relative;
background: #000000;
animation: alias 3s;
}

@keyframes alias
{
0%{width: 100px;}
50%{width: 200px;}
100%{width: 300px;}
}

Como se puede observar la propiedad animation obtiene el alias del @keyframe y marca los segundos que durará la animación.

El código del ejemplo de este post es el siguiente ...

CSS ... HTML ...