En el post anterior de esta colección de recursos y herramientas útiles para un nuevo proyecto que está arrancando o del que quieres renovar su aspecto, te comenté algunas ideas para trabajar la tipografía, layout e incluir iconos.
En este post me gustaría ofrecerte algunas herramientas sobre uno de los campos en donde la gente suele tener muchas dudas: las animaciones de CSS. Realmente vistosas, pero complicadas de entender en un primer momento. Existen recursos disponibles en Internet que te permiten copiar y pegar animaciones directamente en tu proyecto para hacer más atractiva tu interfaz. En este artículo te voy a sugerir algunas de las que más me han gustado a mí.
Entendiendo las animaciones en CSS
Las animaciones en CSS permiten, valga la redundancia, animar una transición desde un estilo concreto de CSS a otro. Con transición nos estamos refiriendo a alguna propiedad de CSS, como la posición, el tamaño, la opacidad, etc.
Una animación consta de dos componentes. Por un lado, definimos un estilo que determina la animación (es decir, qué y cómo se va a animar) y, por otro lado, un conjunto de fotogramas que indican el estado inicial y el final (incluyendo los intermedios si fuese necesario).
Desde hace años existen las animaciones, pero generalmente se empleaba Javascript para controlarlas, pues CSS no era por aquel entonces lo suficientemente potente como para ello ni existían propiedades concretas o estandarizadas para la gestión de animaciones.
Hoy en día es justo al revés: es preferible emplear CSS para el control de animaciones. Esto es así porque cuando hacemos animaciones con CSS es el navegador quien las está coordinando realmente y, por ello, se puede optimizar el rendimiento y eficiencia (reduciendo la frecuencia de actualización, cancelando la animación si la ventana no está visible, empleando aceleración por hardware o GPU).
Las animaciones básicas son bastante sencillas de codificar. Por ejemplo, el siguiente fragmento de CSS describe un cuadrado rojo que cambiará a amarillo para luego volver a rojo (sin repeticiones; solo una vez).
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style> Sin embargo, cuando la animación va cogiendo complejidad, la cosa se puede complicar. Y justo por eso, existen herramientas que hacen mucho más sencilla la tarea de codificar las animaciones.
A continuación, te muestro las mejores herramientas con animaciones en CSS ya realizadas. Lo único que tendrás que hacer es seleccionar la animación que más te gusta, copiarla y pegarla directamente en tu proyecto.
Animaciones listas para copiar y pegar
AnimatiSS - A nice, colorful collection of CSS animations for your projects
Esta webApp es tremendamente sencilla, pero no por eso menos útil. Simplemente, selecciona qué estilo de animación quieres aplicar (rotaciones, escalado, etc.) y elige la que más te guste de las opciones que te ofrece. Puedes probarla haciendo clic en el botón de play y si te convence, haz clic en el botón de la izquierda para copiar el código y pegarlo directamente en tu proyecto. Simple, fácil y gratuito. ¿Qué más se puede pedir?
Animista es una de mis favoritas. Es parecida a la anterior en cuanto a sencillez, pero como valor añadido, te permite personalizar algunos parámetros como la duración o el retardo. Selecciona el redondel con la categoría principal y la animación propiamente dicha en el cuadro inferior. Luego, configura los parámetros hasta que la animación te enamore.
Cuando ya la tengas lista, puedes exportar el código haciendo clic en el icono entre llaves. Otro valor añadido es que te permite exportar el código con prefijos (en algunas cuestiones cada navegador utiliza un prefijo propio) y/o minificado para que ocupe menos. Sin duda, una de las webApps que deberás tener en tu barra de favoritos cuando se trate de animaciones.
Cuando hablamos de animaciones, estas pueden ser lineales, ir más rápido al principio y frenar al final o viceversa. El sistema interno que se usa para definir la velocidad de la animación son las curvas de Bezier, un sistema que permite crear curvas suaves entre dos puntos. Seguramente las hayas utilizado sin darte cuenta cuando usas la herramienta Pluma o similar en Illustrator o programas por el estilo.
Generalmente se usan las curvas predefinidas como easeIn (lento al principio; rápido al final) o easeOut (rápido al principio y lento al final). Sin embargo, es posible que quieras definir tú la curva que va a seguir la animación. Y dicho todo esto, te presento Easings, una webApp pensada para desarrolladores más expertos que quieran diseñar su propia curva de Bezier.
Te permite dibujar la curva (o usar las predefinidas) y comprobar cómo queda sobre 5 ejemplos. Si te convence, bastará con copiar el parámetro que aparece abajo a la izquierda y añadirlo a tu CSS.
Con estas tres herramientas, seguro que encuentras alguna animación que te guste y puedas utilizar en tu proyecto. Pero, ¿qué pasa si quieres hacer tu propia animación? Pues en ese caso, vamos a ver una herramienta para que puedas crearla desde cero.
Herramientas de animación en CSS
Keyframes es una aplicación bastante simple pero completa que te permite configurar animaciones CSS desde cero. Cuando entras, verás un timeline abajo, una diana de ejemplo arriba y, al lateral derecho, todas las propiedades que podrás cambiar.
En el timeline, selecciona el keypoint (o punto clave) azul, el que está marcado como 0. Este es el principio de tu animación. Establece los parámetros que consideres (escala, color, opacidad, posición, etc.). Este punto establece cómo empieza la animación; desde donde parte.
Después, selecciona en el timeline el punto negro, el que tiene una etiqueta que muestra 100. Este es el punto final de tu aplicación. Define en el lateral derecho las propiedades que van a cambiar. Este punto te indica cómo finaliza tu animación, hasta dónde llega. Si haces cambios en este punto, asegúrate de haberlo establecido también en el punto de origen.
Adicionalmente, puedes añadir puntos intermedios en tu animación (por ejemplo, si quieres que cambie antes de volver a cambiar; de rojo a amarillo y luego a azul. El amarillo es el punto intermedio). Para ello, haz clic en "Add Step" justo encima del timeline y posteriormente, haz clic en el timeline en los puntos donde quieras añadir estados intermedios. Por cada estado que añadas, configura qué quieres cambiar en el lateral derecho (no es necesario definirlos todos si no quieres que se modifiquen en este punto).
Cuando lo tengas listo, encima del lateral que contiene las opciones, haz clic en el icono en el que aparecen unas llaves de código. Desde ahí podrás exportar el CSS necesario y pegarlo directamente en tu proyecto.
Keyframes es una aplicación un poco compleja si acabas de empezar, así que te recomiendo que juegues con ella hasta que te familiarices.
Conclusión
Las animaciones son una de las partes de CSS que más me gustan. Añaden mucho dinamismo a una interfaz y le dan más personalidad. Además, en lo que se realiza la animación, el sistema puede ir haciendo los precálculos que necesite y parece que la aplicación es más rápida.
Sin embargo, dominar las animaciones es algo complicado, sobre todo al principio. Pero, para los usuarios que nos cuesta dominarlas, existen herramientas bastante completas y recursos listos para utilizar en tu proyecto.
Así que, ya sabes, animar tus interfaces no es nada complicado y le dan un dinamismo muy interesante.
¡Qué tengas un feliz coding!
