Seguro que has visto animaciones impresionantes hechas con CSS3. Quizás las más vistosas usaban efectos tridimensionales y probablemente cuando hayas visualizado el código que se necesita para provocar esas animaciones te haya sorprendido que sea tan breve y sencillo en la mayoría de los casos.

¿Quieres aprender que son y como llevarlos a cabo?

Entonces muy atento a este post.

¿Qué son las animaciones en css3?

Las hojas de estilo (CSS) para los que no sepan a ciencia cierta de lo que se trata, es un archivo que se encarga de dar colores, tamaños y estructura a nuestras páginas webs. Esta nueva evolución de animaciones con css3 nos permite dar movimiento a cualquier elemento en nuestro site, es decir, podemos hacer, por ejemplo, que una capa (div), un texto o una tabla tengan movimiento permitiendo ver al inicio de nuestra web un texto apareciendo, algún elemento rotando o al deslizar con el ratón por encima de una capa que esta gire o cambie de tamaño.

Desde que flash no es compatible con los dispositivos móviles, el css3 ha cobrado mucha más importancia, ya que, como hemos comentado en anteriores post, actualmente los usuarios acceden cada más a Internet a través de sus dispositivos móviles, por lo que contar con animaciones CSS permite seguir disfrutando de movimiento y animaciones en nuestras pequeñas pantallas sin la necesidad de cargar archivos de gran tamaño para ello, (como ya ocurría con la utilización de flash).

Las animaciones se logran gracias a la función “animation” y sus subpropiedades. Estas últimas nos dan la posibilidad de configurar la duración, el ritmo y otras características. Las más destacadas son las siguientes: 

Animation-delay

Es el tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación. 

Animation-direction

Nos indica si la animación se ve obligada a retroceder hasta el fotograma de inicio cuando se finalice la secuencia, o si debe comenzar desde el principio al llegar al final.

Animation-iteration-count

El número de iteraciones (Repeticiones) de nuestra animación.

Animation-name 

Especifica el nombre de la regla @keyframes.

Animation-duration 

Cuánto tiempo abarca (duración) nuestra animación.

Animation-fill-mode

Cuáles serán los valores de nuestras propiedades cuando se finaliza la animación.

Animation-timing-function 

Indica el ritmo de la animación. Es decir, cómo se muestran los fotogramas de la animación, estableciendo curvas de aceleración.

Animation-play-state

Pausa o reanuda nuestra animación.

Una vez comentadas las distintas funciones de animation es hora de hablar sobre los Keyframes. Cuando especificamos un código CSS dentro de la propiedad keyframe, la animación empezará a cambiar gradualmente; desde un estilo CSS inicial (0%) a el estilo con el que quieras finalizar (100%) . Un ejemplo de cómo se vería un Keyframe en código:





Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).

Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:

Puedes ver un ejemplo pinchando aquí.

Animaciones de CSS en comparación con las de JavaScript

Originalmente Flash nos pavimentó el camino a la hora de caracterizar con más que texto o imágenes las páginas web. Permitió a los desarrolladores incluir animaciones y otros ricos efectos, guiándonos hacia una experiencia de usuario más colorida y variada. Sin embargo, Flash estaba plagado de fallos, como los problemas de seguridad,los largos tiempos de carga en redes mediocres... por ello vinieron las librerías JavaScript como jQuery, Prototype y MooTools, las cuales desplazaron muchos de los problemas de Flash corriendo nativamente en el navegador, además de hacer que fuera más sencillo para el desarrollador medio usar Javascript a la hora de crear efectos y animaciones.

Han pasado ya unos cuantos años y tenemos con nosotros las habilidades de CSS3 para crear animaciones, las cuales ofrecen ventajas adicionales, como el incremento potencial de velocidad (debido a que son renderizadas directamente por el navegador).

Pero, ¿cuál es realmente la mejor solución para nosotros a la hora de usar animaciones?

Desafortunadamente, el soporte de los navegadores no es tan bueno en el caso de las animaciones CSS3, ya que las versiones de IE por debajo de la 10 no soportan esta propiedad, y aunque la gran mayoría de los otros grandes navegadores sí lo hacen, y la especificación de animación es ya estable en ellos, la mayoría aún no ha eliminado los requerimientos de prefijos particulares de cada navegador, haciendo que para que se dé soporte a la propiedad haya que incluirlos, (siendo éstos -webkit-, -moz-, -ms- y -o-).

En rendimiento, sin embargo, claramente gana CSS3 a mucha distancia. La gigantesca diferencia es debida a que el procesador de CSS del navegador está escrito en C++ haciendo que el código nativo se ejecute muy rápido, mientras que jQuery (JavaScript) es un lenguaje interpretado y el navegador no puede predecir por adelantado su comportamiento, intentando adivinar qué evento ocurrirá después y por lo tanto prolongando la espera.

Aunque los resultados de arriba indican que tienes que usar animaciones CSS3, deberías tener en cuenta las ventajas e inconvenientes que hemos discutido anteriormente en el post. Necesitas priorizar que aún una importante cantidad de gente usa Internet Explorer 7 y 8, así que deberías usar jQuery si es absolutamente necesario que tus animaciones funciones igual de bien que en todos los navegadores antiguos.

¿Qué navegadores leen las animaciones en css3 y html5?

La evolución del entorno web nos lleva hacia aplicaciones cada vez más ricas y más interactivas, difuminando la barrera entre aplicaciones web y aplicaciones de escritorio, datos locales y en la nube, etc…

Pese a la fama y peso que está recibiendo en los medios el standard HTML5, aún en borrador, no son menos importantes las hojas de estilo. Siendo consecuentes, las hojas de estilo son lo que hacen de una web llena de texto como un libro, una composición de formas, colores, secciones y, con CSS3, interacción también.

Es triste comprobar que, estando CSS3 desde aproximadamente el año 2005, aun los navegadores no soporten algunas de sus funciones todo lo que sería deseable.

Como es costumbre, Webkit va a la cabeza, Firefox le sigue a una distancia no demasiado grande, Opera aproximadamente donde firefox, e Internet Explorer, incluso en su versión 9, decepciona como siempre.

Los navegadores muy antiguos no leerán estos nuevos códigos, pero en la actualidad la mayoría de los usuarios podrán visualizar nuestras animaciones sin problema, ya que por seguridad los sistemas operativos y navegadores suelen actualizarse cada cierto periodo de tiempo para no tener problemas. A continuación os presentamos esta tabla comparativa donde se ve claramente desde que versión son compatibles.

Para concluir este post os dejo con un ejemplo de animación en 3D, que espero que sirva de ayuda. A partir de aquí, podéis experimentar a animar diferentes parámetros como la opacidad, el tamaño, posición, color y tamaño del borde o incluso mezclar varios elementos.

Pincha aquí para ver el ejemplo.
Os animo a compartir vuestros experimentos en los comentarios, y si os surge alguna duda intentaremos ayudaros a resolverla.