CSS le permite no solo crear animaciones, sino también controlar su duración, velocidad, hora de inicio, dirección y más.
Por ejemplo, suponga que desea que la animación se mueva de izquierda a derecha, de derecha a izquierda o hacia adelante y hacia atrás. Puede hacer esto con la propiedad de dirección de animación CSS.
Analicemos cómo definir esta propiedad para controlar la dirección de la animación a continuación.
¿Qué es la propiedad de dirección de animación CSS?
La propiedad animation-direction especifica la dirección de la animación. Puede configurar la animación para que se reproduzca hacia adelante, hacia atrás o cambie de dirección con cada ciclo de animación.
La sintaxis de la propiedad de dirección de animación CSS es:
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;Para asegurarse de que la animación funcione correctamente y se mueva en la dirección que desea, también debe definir el nombre de la animación y las propiedades de duración.
Valores de dirección de animación CSS
Hay muchos valores posibles para la propiedad de dirección de animación CSS. Los más comunes son normal, invertido, alterno y alterno inversor. La propiedad también acepta valores globales de inicio y herencia. Vamos a definir cada uno a continuación.
Normal
Si usa un valor normal, la animación se reproducirá hacia adelante. Esto significa que para cada ciclo de animación, la animación se restablecerá a su estado inicial.
Normal es el valor predeterminado para la propiedad de dirección de animación en CSS. Entonces, si no establece esta propiedad, se reproducirá hacia adelante de forma predeterminada.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
En el ejemplo anterior, la animación comienza en 0, se mueve 100 píxeles a la derecha, luego se restablece a 0 y se repite.
Rotación
Si usa un valor invertido, la animación se reproducirá hacia atrás. Esto significa que para cada ciclo de animación, la animación se restablecerá a su estado final.
Con este valor, no solo los pasos de animación se realizan hacia atrás, sino que también se invierten las funciones de tiempo. Por ejemplo, la función de holgura de entrada pasa a ser holgura.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
En el ejemplo anterior, la animación comienza en 100 px a la derecha, se mueve hacia la izquierda hasta que llega a 0, luego se restablece a 100 px y se repite.
Alternativa
Si desea que la animación cambie de dirección en cada ciclo, puede usar un valor alternativo. Con este valor, la animación se reproducirá primero hacia adelante y luego hacia atrás.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
En el ejemplo anterior, la animación comienza en 0 píxeles, se mueve 100 píxeles a la derecha, vuelve a 0 y vuelve a la derecha. No hay reinicio, por lo que el bucle es continuo durante dos ciclos.
Alternativa inversa
Si usa un valor de volteo alternativo, la animación también invertirá la dirección en cada ciclo. Se reproducirá primero hacia atrás y luego hacia adelante.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
En el ejemplo anterior, la animación comienza en 100 px a la derecha, se mueve 100 px a la izquierda, vuelve a 100 y vuelve a la izquierda. No hay reinicio, por lo que el bucle es continuo durante dos ciclos.
Preliminar
El valor inicial establece el valor de la propiedad de dirección de animación en el valor predeterminado: normal.
Heredar
Si se especifica un valor de herencia, la propiedad de dirección de animación heredará el valor de su elemento principal.
Abreviatura de CSS para la dirección de animación.
También puede configurar todas las propiedades de animación, incluida la dirección de animación, con la propiedad CSS del acceso directo de animación. Esto requerirá que escriba menos código y organice su base de código en general. Por ejemplo, el nombre de la animación, la duración, el número de iteraciones, el tiempo y la dirección se definen en la misma línea de código a continuación:
animation: MyDiv 10s 5 ease alternate;
Aquí hay un ejemplo usando la abreviatura anterior.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
CSS Animación-Dirección Infinita
Mediante el uso de las propiedades animation-direction y animation-iteration-count, puede configurar la animación para que avance, retroceda o de otro modo durante un número específico de ciclos de animación, o indefinidamente.
El siguiente ejemplo demuestra cada uno de los valores de dirección de animación de CSS cuando se configuran para repetirse indefinidamente. También utiliza la propiedad de acceso directo de animación.
ver la pluma Infinito de Christina Perricone (@hubspot) en CódigoPen.
Dirige tus animaciones CSS
Con CSS puedes controlar la dirección de tus animaciones. Es tan simple como agregar otra línea de CSS o algún otro valor usando la propiedad de acceso directo de animación. Tienes control total sobre tus animaciones para que puedas decidir qué es lo mejor para el diseño de tu sitio web.
