En el diseño web moderno, una animación es un recurso que nos puede ayudar a expandir la experiencia de usuario, crear interacción y diferenciar nuestros elementos. Sin embargo, para poder incorporar animaciones en nuestra página web, primero debemos saber qué aspectos nos permite controlar. Por ello, en este post, te enseñaremos cómo configurar una animación en CSS para que la puedas incorporar a tu experiencia de usuario.
¿Qué necesitamos para configurar una animación en CSS?
Antes de aprender cómo configurar una animación en CSS, te invitamos a leer nuestro post sobre qué son y cómo funcionan las animaciones en CSS. Allí podrás leer que una animación es realmente una forma elegante de pasar entre dos o más estados de un elemento. Con ellas, podemos tener más estados en un elemento que con las transiciones, permitiéndonos cambiar tantas propiedades de CSS como queramos y el número de veces que queramos.
Para configurar una animación en CSS utilizamos la propiedad animation. Esta propiedad se inserta en un elemento usando el tipo de selector que deseemos. A continuación, te presentamos las distintas funciones que forman parte de esta propiedad:
animation-name
La propiedad animation-name nos permite insertar los estados que hemos definido en nuestra directiva @keyframes. Basta con insertar el mismo nombre que hemos definido en la directiva para que los distintos estados del elemento se conecten.
animation-delay
Determina el retardo con el que empezará la animación en unidades de segundo. Es decir, podemos empezar una animación directamente o determinar un tiempo antes de que arranque la animación.
animation-duration
Determina la duración total de la animación en unidades de segundo.
animation-fill-mode
La propiedad animation-fill-mode determina el estado final de la animación. Es decir, define dónde queda el elemento una vez ha terminado la animación. Esta propiedad se configura usando las siguientes palabras clave:
- none: no se aplicarán los estilos de ningún keyframe.
- backwards: hace que el estado final de la animación sea el estado definido con los valores del primer keyframe, es decir ,que vuelva a su estado inicial.
- forwards: hace que el estado final de la animación sea el estado definido en el último keyframe; es decir, la animación termina y el elemento queda en ese estado.
- both: esta palabra clave une las reglas de las opciones backwards y forwards. Sin embargo, su efecto solo se verá en animaciones más complejas con más de una dirección.
Ten en cuenta que los conceptos de “primer keyframe” y “último keyframe” dependen de la dirección de la animación o la propiedad animation-direction, pues esta define qué es el inicio y el final. Además, ten presente que puedes usar más de una palabra clave cuando tengas múltiples animaciones.
animation-iteration-count
Determina el número de repeticiones que tendrá la animación. En esta propiedad también podemos insertar la palabra clave infinite, la cual determina que la animación se repetirá de forma indefinida.
animation-timing-function
Esta propiedad, también conocida como función de tiempo, establece las curvas de aceleración. Es una propiedad muy similar a la curva de aceleración o cubic bezier en los tipos de transiciones de CSS.
animation-direction
Esta propiedad indica si la dirección de la animación debe invertirse en cada iteración o si vuelve al inicio. Esto quiere decir que podemos configurar si las repeticiones de la animación suceden de principio a fin (0 a 100) o de fin a inicio (100 a 0). Esto genera dos efectos distintos: uno es como un loop, mientras que el otro se parece más a un rebote.
animation-play-state
Esta propiedad nos permite, en un momento dado, pausar o reanudar la animación.
¿Cómo configurar una animación en CSS?
Como hemos podido ver en el caso de las transformaciones de CSS, CSS casi siempre nos da una manera más sencilla de configurar nuestras propiedades. Esto también es verdad a la hora de configurar una animación en CSS. En este caso, todas las propiedades anteriores pueden configuraRSE bajo una propiedad única: animation. A continuación, te demostramos cuál es el orden de configuración de estas propiedades:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
Aunque no siempre determinamos todas las propiedades de una animación, las primeras tres propiedades son lo que necesitamos en una animación básica. Determinar el nombre, la duración y la función nos permite tener un control inicial de cómo se verán nuestras animaciones en el elemento.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo configurar una animación en CSS, ¡es el momento de crear y diseñar tu propia página web con elementos animados! En KeepCoding sabemos que esto puede ser todo un reto y que, a veces, necesitarás más que un par de artículos para sentirte en confianza de aplicar un nuevo diseño.
Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web con la guía y la ayuda de nuestros profesores, que son grandes profesionales en el sector. ¡También crearás y diseñarás tu propia página web con elementos animados y diseño responsive! ¡No esperes más para unirte y matricúlate ya para destacar en el sector IT!
