Las animaciones en CSS nos permiten crear y diseñar elementos con movimiento que pasan por diferentes estados de una manera elegante. Una buena animación es, además, una manera de expandir la experiencia de usuario al crear elementos modernos que permiten explorar una página web de otro modo.
Esta flexibilidad y complejidad viene de la gran cantidad de propiedades que nos permiten controlar su movimiento, aspecto y recorrido. En esta ocasión, te enseñaremos cómo usar la propiedad animation-direction de CSS para controlar el recorrido de tus animaciones.
¿Qué es la propiedad animation-direction de CSS?
Como has podido leer en nuestros posts sobre las animaciones en CSS, una animación es una forma elegante de pasar un elemento de un estado a otro. Para crear este paso, necesitamos primero crear los keyframes o fotogramas clave que determinarán los distintos estados por los que pasará el elemento.
Una vez creado este recorrido, podemos insertar la animación en los elementos deseados con solo insertar el nombre que le hemos dado en la directiva @keyframes bajo la propiedad animation. Podrás usar esta misma propiedad para modificar muchas características de la animación, como lo son su tiempo, curva de velocidad y estado final. Si quieres saber más sobre las distintas propiedades que puedes modificar en una animación, te invitamos a leer nuestro post sobre cómo configurar una animación.
Por tanto, la propiedad animation-direction es una de las propiedades que podemos configurar al insertar nuestra animación en un elemento, al igual que su tiempo, número de iteraciones, estado final, retraso, nombre, curva de velocidad y estado play. El propósito particular de la propiedad animation-direction de CSS es establecer la dirección en la que se repite una animación. A continuación te explicamos exactamente cómo funciona.
¿Cómo funciona la propiedad animation-direction de CSS?
Al igual que muchas otras propiedades, la propiedad animation-direction de CSS funciona a partir de palabras clave. Todas estas palabras clave determinan qué sucederá con la animación cuando esta tiene más de una iteración o repetición. Es decir, definen en qué dirección se repetirá la animación.
A continuación, te presentamos las distintas opciones disponibles para configurar esta propiedad:
normal
Esta opción determina que, una vez se termina un ciclo, la animación se reinicia desde su estado inicial o primer keyframe. Ten en cuenta que este es el comportamiento por defecto de la propiedad. Es decir, una animación automáticamente volverá al inicio o keyframe inicial si no determinamos un valor para esta propiedad.
reverse
Esta opción hace que la dirección de la animación sea completamente opuesta a la opción normal; esto es, la animación y todos sus ciclos suceden en el orden contrario al establecido en los keyframes. Al igual que en la opción normal, todos los ciclos vuelven a su estado inicial, que en este caso es el último keyframe. Entonces, el efecto que genera esta opción es el mismo efecto que la opción anterior, con la diferencia de que sus puntos iniciales y finales están invertidos.
alternate
La opción alternate hace que, una vez terminado un ciclo, la animación invierta la dirección de su recorrido para volver al inicio. De esta manera, el inicio de la animación se convierte en su final con cada repetición. Esto genera una animación más suave y sutil, pues no hay un cambio de posición drástico. Para generar este efecto, la animación ejecuta los pasos o keyframes del modo contrario al determinado en la iteración anterior.
Ten presente que esta opción también invierte las funciones de tiempo o curva de aceleración de la animación. Esto quiere decir que la animación con la función ease-in se convierte en una animación con la función ease-out en su siguiente repetición.
alternate-reverse
Como su nombre indica, la opción alternate-reverse funciona como la opción reverse para la opción alternate. Es decir, genera el mismo efecto que la opción alternate, solo que invierte los puntos iniciales y finales de la animación. Por lo tanto, se genera el mismo estilo de loop, solo que empieza en la posición final de la animación.
Si quieres ver lo que hacen estas opciones en tiempo real, te invitamos a jugar con las demostraciones que tiene w3schools de la propiedad animation-direction de CSS.
¿Te animas a seguir aprendiendo?
Después de leer este post, sabes exactamente cómo funciona la propiedad animation-direction de CSS y estás preparado para usarla en las animaciones que crees en tu página web. Sin embargo, sabes que las animaciones de CSS y el mundo del desarrollo web todavía tienen mucho por enseñarte. Por ello, te invitamos a que te animes a seguir aprendiendo con nosotros en nuestro Desarrollo Web Full Stack Bootcamp.
En esta formación tecnológica intensiva aprenderás, junto a otros fanáticos de la programación como tú, todo lo necesario para convertirte en un verdadero experto en el ámbito del desarrollo web. Además, como empleamos una metodología hands on que se enfoca tanto en la teoría como en la práctica, durante el transcurso del curso aplicarás los conocimientos aprendidos en la creación y desarrollo de tu propia página web. Así, en unos pocos meses, ¡serás un experto en este tema! ¡No lo dudes más y matricúlate ahora!
