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

¿Notaron que parecía como si hubiera un tamaño intermedio cuando se pasa el puntero sobre nuestro elemento? eso se debe nuestro cerebro nos engaña, ya que crea una imagen intermedia para convertir el movimiento brusco en uno con armonía (o casi).

Si queremos que de verdad tenga un intermedio y sea más fluida la transición, utilizaremos la propiedad transition a la le indicamos las propiedades que aran el cambio en su valor y el tiempo, aunque también podemos darle otros valores como el tiempo que se tarda en comenzar y la forma en que transcurrirá el tiempo la transición solo utilizaremos las dos primeras.

Aquí está un ejemplo de como se utilizaría la propiedad.

#elemento{
    background:red;
    width:50px;
    height:30px;
    transition:width 1.5s;
}
#elemento:hover{
    width:100px;
}

Bueno supongo que en este punto ya entiendes cómo funciona una animación y sabes cómo realizar una animación simple en CSS pero falta ahora lo más importante la propiedad animation.
Como venía explicando las animaciones consisten en un sucesivo cambio de algo en imágenes creando así una ilusión de movimiento de ese algo, ahora esas imágenes se vendrían llamando fotogramas y en CSS los podemos utilizar con la palabra clave @keyframe (vendiera siendo en español como fotograma clave).

La propiedad animation se utiliza en la regla del elemento que queremos y como valor el nombre que le hemos puesto en a los fotogramas.
Podemos crear animaciones simples las cuales constaran solo de dos fotogramas las cuales serán el principio y el final, para esto podemos utilizar las palabras from(desde) to(hasta) o también 0% a 100%.
Al utilizar la segunda opción es posible agregar más fotogramas de forma intermediaria con un valor del 0% hasta el 100%.
Bueno después de todo esto lo que tenía que realizar mi compañero de trabajo era similar a un mundo girando y por eso el título de esta publicación, así que dejo a continuación el ejemple de una animación infinita y una transición la cual hace poner el elemento que representa al mundo al revés.
click aquí para ver el ejemplo

Hasta luego y buena suerte.

Fuentes:
mdn animation
Mi poquita experiencia.

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..