¿CSS3 o Javascript y jQuery? ¿Qué utilizo para animar nuestra página web?
En cualquier página web, y cada vez más, las animaciones son bienvenidas. A la hora de dar vida a sus proyectos, diseñadores y desarrolladores tienen numerosas opciones y, como a menudo existen múltiples caminos para llegar al mismo lugar, debemos saber escoger el más adecuado.
Ahí es donde queremos incidir en este artículo, presentando dos tecnologías muy extendidas para generar animaciones en Internet: CSS3 y Javascript con jQuery.
Comencemos por resumir las características de ambos. Las animaciones con CSS3 nos permiten establecer las transformaciones por medio de estilos CSS, así como los fotogramas clave (key frames) de la animación. Los navegadores son los que interpretan el CSS y son capaces de mostrar el contenido atendiendo a la forma definida al escribir la animación.
En las animaciones basadas en Javascript y su libreria jQuery, Javascript nos permite alterar dinámicamente el contenido o la forma de una web; y con jQuery es mucho más sencillo, ya que se puede escribir un único código Javascript que dicha librería es capaz de hacer que funcione correctamente en todos los navegadores.
Ahora, podemos ver diversos criterios y la contraposición de una técnica u otra para realizar las animaciones CSS:
Recursos para animación
Con CSS, obtenemos grandes recursos para realizar animación, desde traslación a rotación, escala, etc. En realidad, son los mismos que podemos llegar a realizar con Javascript, aunque las diferencias son que en CSS ya nos dan hechos los cálculos para producirlos, mientras que en Javascript nos tenemos que tomar la molestia de crear nuestros propios algoritmos para realizar diferentes efectos, o instalar plugins que ya tengan definidos las animaciones deseadas en código. Aquí, sin duda, gana CSS.
Potencia
Con CSS, el navegador es capaz de realizar animaciones más complejas con menor necesidad de procesamiento del cliente. Esto es gracias a que el propio browser es capaz de usar los recursos de la máquina, como la aceleración de la tarjeta de gráficos. Las animaciones CSS están, por tanto, más optimizadas y requerirán menores capacidades de procesamiento, por lo que CSS es más fluida.
Interacción
En CSS, las posibilidades de interacción son limitadas. Simplemente, podremos hacer cosas cuando se produzcan comportamientos muy elementales, como la carga de una página, darle foco a un elemento o bien pasar el ratón por encima. Aquí, Javascript es absolutamente necesario cuando se complica la animación. Por ejemplo, que se produzca cuando se activa un elemento de formulario independiente del elemento a animar o cuando se produzcan eventos de todo tipo, incluso aquellos ajenos a la página. Sin embargo, antes estas necesidades de interacción lo ideal es determinar con Javascript el momento y el lugar y escribir las animaciones en CSS que es más sencillo y está más optimizado.
Compatibilidad
Este punto es interesante de tratar puesto que las características necesarias para realizar animaciones son más antiguas en Javascript. Es decir, en navegadores antiguos es posible que no haya compatibilidad con animaciones CSS3 y sí se puedan realizar con Javascript. Sin embargo, ¿hasta qué punto es necesario que esa animación se vea en un navegador antiguo? En este sentido, se suele obviar el uso de animaciones en navegadores que no las soportan, o si acaso usar Javascript como «fallback» (activarlo solo en caso que la animación CSS no esté soportada).
Accesibilidad
La accesibilidad es otro de los motivos por los que usar animaciones CSS3. No siempre Javascript está disponible y, si nos preocupamos por hacer que el contenido se pueda ver en todos los entornos, es preferible no basarse en Javascript para producirlo.
Conclusión
Como se puede observar, casi todos los argumentos nos invitan a conocer más a fondo las animaciones CSS3 y usar Javascript allí donde el lenguaje de definición de estilos no llegue. Nunca para sustituirlo. Usa Javascript para aportar interacción donde no es posible con CSS y para que esas animaciones imprescindibles no se pierdan en los navegadores que no soportan CSS3.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.