Al crear una página web, lo principal en lo que nos solemos enfocar es en el contenido, y posteriormente, en el diseño visual y estético. Sin embargo, muchas veces este contenido se ve de forma totalmente estática, lo que hace que la experiencia de usuario sea aburrida o monótona.
Para solucionar este problema, podemos introducir pequeños eventos dinámicos denominados animaciones, que harán que nuestro paso por la web sea más entretenido y menos monótono. Las animaciones nos permiten crear una experiencia más agradable e interactiva, incluso adaptada a los movimientos o respuestas del usuario por la web.
¿Qué es una animación?
Las animaciones son pequeños cambios en el contenido o aspecto visual de una página, de modo que sea más amigable su visualización. Pueden ser sencillas, como cambiar el color o tamaño de una imagen, así como animaciones más complejas, como por ejemplo transformaciones o movimientos específicos.
En las animaciones hay dos conceptos básicos importantes:
- Estado: Es el estado inicial en el que se encuentra un elemento de la web (imagen, botón, etc...)
- Transición: Es el paso que se realiza entre un estado concreto a otro estado diferente.
Así pues, una animación generalmente se compone de una colección de transiciones de un estado a otro, de modo que como mínimo, deben ser dos estados.
Propósito de una animación
Además de lo mencionado, crear una animación generalmente tiene varios propósitos u objetivos. Los principales suelen ser los siguientes:
-
1️⃣ Mejorar la experiencia del usuario (UX): El usuario sentirá que su estancia en la web es más satisfactoria y agradable, por lo que preferirá continuar su navegación.
-
2️⃣ Guíar o dirigir la atención del usuario: Las animaciones son buenas para llamar la atención del usuario y poner el foco en una parte concreta a la que debe darle prioridad.
-
3️⃣ Retroalimentar las acciones del usuario: Las animaciones permiten dar feedback al usuario para saber si está haciendo lo correcto o, por el contrario, se ha equivocado o ha hecho algo que no debe hacer.
-
4️⃣ Crear narrativas o efectos visuales: Por último, las animaciones se pueden utilizar para crear narrativas, historias, decorar la página o simplemente dotar de elementos atractivos a una web.
Animación en CSS
Para que el ojo humano pueda percibir una animación se necesitan observar varios fotogramas. En los navegadores, el papel de un fotograma lo toma ese estado que hemos mencionado anteriormente. Como no sería práctico definir múltiples fotogramas para percibir la animación, lo que haremos es definir una serie de fotogramas clave y el navegador irá generando los fotogramas intermedios que ocurren durante la transición de un estado a otro.
En este ejemplo, los fotogramas clave que definiríamos nosotros sería un primer estado en rojo, un segundo estado en amarillo y un tercer estado en verde. El navegador iría generando los fotogramas intermedios entre ellos, ahorrándonos el trabajo de definirlos.
En el siguiente artículo, vamos a explicar los diferentes tipos de animaciones que existen en el apartado de Animaciones Web. Echa un vistazo para comprender como funcionan.
