Gira el mundo (una explicación de las animaciones en css3)

Hoy les traigo algo de CSS, sé que les debo la segunda parte de JavaScript y pronto se las traeré es que he estado un poco distraído con lol (nunca voy a salir de bronce), yo sé que hay muchos y muy buenos tutoriales por la red y esta publicación lo hago por petición de un compañero de trabajo que no conoce las animaciones en CSS3 y ya que me muevo bien en esa área me ofrecí a ayudarlo, así que no creo que haga daño otra publicación en la red.

La animación es un efecto visual producido por el sucesivo cambio de algo en imágenes y para entender esto hay que pensar que para ir del punto C al punto A tenemos que cruzar por el punto B, fácil de entender ¿verdad? podemos pensar en esto como si fueran fotos, si pasas muy rápido una serie de fotos en la que un objeto está en diferente posición en cada una de ellas, nos crearía una ilusión en la que el objeto está en movimiento, siendo más preciso así funciona la técnica de stop motion.

Ahora tienes una noción de cómo vamos a realizar una animación para esto necesitaremos de una serie de propiedades y valores claves en CSS3 que nos ayudaran o mejor dicho crearan por nosotros el efecto deseado, las propiedades a continuación son las principales:

animation: proporciona una forma de combinar valores css, dando un resultado intermedio a los valores dados de inicio y fin creando así una animación.
transform: cambia la apariencia de un elemento.
transition: controla los cambios de un elemento.

Les Comparto el código CSS para una transición la cual es el paso de un estado a otro activado por un evento.

/* para probar */
/* crea un div con id elemento */
#elemento{
    background:red;
    width:50px;
    height:30px;
}
#elemento:hover{
	width: 100px;
}

continuara..