Introducción a las animaciones CSS

  • Por
  • 11 de octubre de 2010
  • Valoración:
  • 1 Comentarios
  • CSS
Las animaciones CSS nos permiten realizar efectos que hasta ahora estaban sólo disponibles con otros tipos de tecnologías. Veremos los principales aspectos a conocer sobre las animaciones CSS 3.
Como todos posiblemente sepamos, hasta el momento, las animaciones en las páginas web siempre se tenían que realizar utilizando diversas tecnologías accesorias, más allá del simple HTML o CSS. El primer sistema que alcanzó gran popularidad para realizar una animación de elementos bastante fluida y espectacular fue la tecnología Flash y luego le acompañaron algunos otros sistemas como Silverlight, de características similares. Sin embargo, todo esto son tecnologías propietarias, que requieren la instalación de un plugin para funcionar en el navegador, lo que impide que sean universales, por mucha aceptación que hayan llegado a tener.

Paralelamente existen varios otros soportes para animación que sí forman parte de las tecnologías de creación de páginas web universales, pero que no llegan ni de lejos a las posibilidades de animación que podríamos desear. Nos referimos a los GIF animados, que tanto se utilizaron al principio y que ahora están prácticamente olvidados, así como a Javascript que también permite hacer animaciones a base de cambiar atributos CSS de manera progresiva a lo largo de un tiempo.

Nota: Hablando de Javascript y aunque quede fuera de lo que vamos a tratar en este artículo, existen algunos frameworks interesantes que permiten desarrollar animaciones de una manera bastante más sencilla de lo que sería si no los utilizásemos. Por ejemplo el popular jQuery permite animaciones simples pero que se hacen en cuestión de segundos. Tambien se pueden realizar animaciones CSS con Javascript incluso con frameworks especializados en este área como las librerias jsAnim.

Bien, pues con CSS 3 viene una nueva forma de realizar animaciones totalmente novedosa y que resultará mucho más sencilla que el uso que podemos conocer con Javascript. Pero lo que es más importante, que soporta muchos más tipos de animación que hasta ahora estaban reservados a tecnologías como Flash, como pueden ser rotaciones, ampliaciones y reducciones del tamaño vectoriales, etc.

Esto no se queda ahí, ya que además se han implementado una ciertas interacciones con el usuario y que se consiguen únicamente con CSS 3. Además, todo ello sin tener que programar, lo que puede resultar mucho más agradable y al alcance de los desarrolladores menos técnicos.

Nota: Esta novedad puede resultar realmente interesante pero debemos decir que en el momento de escribir este artículo no funciona con todos los navegadores. Sólo admiten las animaciones CSS los navegadores Safari y Google Chrome. El resto esta trabajando duro para implementarlo y esperamos que en poco tiempo se puedan ver en todos los navegadores, sobre todo en Firefox y Internet Explorer que son los más utilizados.

Ventajas de las animaciones CSS 3

Las animaciones CSS permiten hacer muchas de las cosas que antes teníamos reservadas sólo al uso de tecnologías supletorias, que no hacían más que incrementar la dificultad del desarrollo, limitar su compatibilidad entre distintos tipos de usuarios y plataformas, así como los requisitos de conocimientos del desarrollador para poder incorporarlas.

Por tanto, una de las ventajas es que nos podemos olvidar de Flash si queremos hacer dinamismos espectaculares en nuestra web. Dejar a Flash de lado además implica que no tenemos que preocuparnos por el posicionamiento de la página que tantos quebraderos de cabeza provoca cuando nuestra web esta creada en enteramente en Flash. Todo esto sin entrar en el tema de la accesibilidad, en el que Flash es un verdadero quebradero de cabeza.

Pero, como dejábamos entrever, las ventajas más importantes serían la compatibilidad y la facilidad de implementación, al usar un lenguaje que ya resulta familiar para el desarrollador. La compatibilidad viene dada por por el uso de un sistema abierto y regulado por el W3C, al que todos los navegadores tarde o temprano se adaptarán. Y la facilidad de desarrollo porque sólo trabajaremos en nuestros sitios con el lenguaje CSS y no existirá la necesidad de dominar otros lenguajes de programación como ocurría con Flash.

Inconvenientes de las animaciones CSS

Como todo en la vida, también existen algunas desventajas al trabajar con animaciones en CSS. Lo cierto es que la mayor que se podría destacar es sólo circunstancial, debido al poco soporte que existe actualmente a esta utilidad. Tenemos dos principales inconvenientes.

En el momento de escribir este artículo las animaciones CSS no son admitidas por los principales navegadores (Ninguna utilidad para animación con CSS 3 se puede utilizar en Internet Explorer y en Firefox algunas cosas ya podemos ver que funcionan a medias, pero aun le queda largo camino por recorrer).
Consume bastantes recursos de máquina para producir las animaciones.

También podremos encontrar que existe alguna dificultad a la hora de la programación, pero no más de la que encontraríamos si tuviésemos que utilizar otros lenguajes o tecnologías distintos de CSS.

Finalmente, volvemos a remarcar que, debido a la imposibilidad de ver los resultados en todos los clientes web, al menos por el momento, deberemos utilizar navegadores basados en Webkit, como son Safari o Google Chrome (siempre en su versión mas actualizada).

Sin mucho más que añadir a nuestra pequeña introducción a las animaciones CSS, comenzaremos a ver cómo se realizan en el siguiente artículo, que nos muestra un poco la teoría sobre este tema y nos da los principios básicos para poder realizar animaciones con CSS 3.

Videotutorial de animaciones CSS3

Además, os presentamos la grabación de un evento en directo que emitimos el 6 de junio de 2012 en el que hablamos sobre animaciones CSS. Se trata de una estupenda presentación para quienes quieren comenzar a realizar sus animaciones en CSS, para que tengan una visión global sobre cómo se realizan y cuáles son sus posibilidades. Esperamos que os guste!

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Comentarios

Miguel H.

12/9/2012
Información sobre el editor
Hola, Creo que es un buen ejemplo de las posibilidades que tiene css3 en el área de las animaciones, ahora y en relación a esto quisiera solicitar por una parte, si me pueden indicar con cual editor se puede trabajar con css3 y a la vez html5, ya que según se comenta en el video esas son los códigos necesarios para el desarrollo de este tipo de animaciones. Por otra si me pueden enviar algún manual que se encuentre disponible de css3; y ojalá pronto continúen con la secuencia de videos tutoriales sobre css3, ya que son excelentes los de html y css pues aprendí mucho a través de ellos . Santiago,Chile.-

Compartir