Qué es la propiedad de dirección de animación CSS: todo lo que necesita saber

¿Qué crees que CSS solo se usa para crear animaciones? De hecho, lo es, pero junto con él, también puede utilizar CSS para controlar la velocidad, la duración, la dirección, la hora de inicio, etc.

No importa si desea que su animación se mueva hacia arriba o hacia abajo, la propiedad de dirección de animación CSS en el desarrollo web le permitirá lograr sus objetivos.

¿Eres nuevo en esto? ¡No necesitas preocuparte! En este blog, conocerá todo sobre las propiedades de animación CSS.

Ahora, sin más preámbulos, comprendamos de qué se trata la animación CSS, junto con su uso.

¿Qué es la propiedad de dirección de animación CSS?

La propiedad de dirección de animación CSS tiene que ver con la dirección de la animación. Una vez que configure esta propiedad, puede configurar fácilmente el ciclo de animación hacia atrás, hacia adelante o en una dirección alternativa.

Ahora, echemos un vistazo a las diferentes direcciones de animación:

• animación-dirección: normal;
• animación-dirección: inversa;
• animación-dirección: alternativa-reversa;
• animación-dirección: alternativa;

Para ayudarlo aún más, he compartido la sintaxis de la propiedad de dirección de animación. Con suerte, esta sintaxis te ayudará a crear animaciones como un profesional.

/* La animación única de la propiedad de animación CSS */

• animación-dirección: normal;
• animación-dirección: inversa;
• animación-dirección: alternativa;
• animación-dirección: alternativa-reversa;

/* La propiedad Multiple animations of CSS animation */

• dirección de animación: normal, inversa;
• dirección de animación: alternativa, inversa, normal;

/* Los valores globales de la propiedad de animación CSS */

• animación-dirección: heredar;
• animación-dirección: inicial;
• animación-dirección: revertir;
• animación-dirección: unset;

Ahora que conoce diferentes propiedades de animación CSS, es hora de comprender los valores de las propiedades de animación CSS.

Valores de propiedad de animación CSS

Normal

Si usa esta propiedad, la animación se reproducirá hacia adelante. Significa que para cada ciclo de animación, la animación se restablecerá al estado inicial y comenzará de nuevo.

El valor "Normal" es básicamente el valor predeterminado de la propiedad de dirección de animación en CSS. Entonces, si no establece esta propiedad, de manera predeterminada, se reproducirá hacia adelante.

Reverso

La animación inversa tiene que ver con las animaciones que se realizan en la dirección inversa de cada ciclo. En este estilo, los pasos de animación y las funciones de temporización se realizan al revés.

Por ejemplo, una función de temporización de entrada lenta se convierte en salida lenta.

Alterno

La animación alternativa invierte la dirección en cada ciclo, con la primera iteración en la dirección de avance . El conteo es para determinar si un ciclo es par o impar comienza en uno.

Alterno-inverso

El alternativo-reverso invierte la dirección de cada ciclo, con la primera iteración reproducida hacia atrás . El conteo es para determinar si un ciclo es par o impar, comenzando en uno.

Atajo CSS para dirección de animación

Te sorprenderá saber que también puedes establecer varias propiedades de animación, incluida la dirección de la animación, que se puede hacer usando la propiedad CSS abreviada de animación.

La propiedad abreviada de animación CSS aplica la animación entre estilos. Es un método abreviado para establecer todas las propiedades de la animación, como el nombre de la animación, la duración de la animación, la función de temporización de la animación, el retraso de la animación, el número de iteraciones de la animación, la dirección de la animación, el modo de relleno de la animación y la reproducción de la animación. estado.

Problemas comunes de animación CSS

Ya sea que su animación no funcione como desea o simplemente no funcione en absoluto, aquí hay algunas razones de los problemas y cómo resolverlos:

No hay regla @keyframes

En las animaciones CSS, la regla @keyframes define la apariencia de la animación. Más específicamente, define qué estilos de elementos cambian y cuándo. Sin esta regla, su elemento no tendrá ninguna animación para usar. Entonces, la próxima vez, verifique si su regla @keyframes existe y si su nombre coincide con el nombre de la animación para el elemento de destino.

Duración de la animación no establecida

Supongamos que ha asignado una regla de fotogramas clave al elemento, pero aún parece que no se reproduce si no ha establecido una duración de animación. De forma predeterminada, cero segundos de duración es el ciclo de animación CSS.

Para anular este ciclo, debe incorporar una regla de duración de la animación en su elemento de destino con un valor de segundos, al igual que en el mismo bloque que el nombre de la animación.

La animación empieza demasiado pronto

A veces, es posible que deba presentar un aplazamiento rápido antes del comienzo de la animación para una mejor experiencia del consumidor. Logre esto con las pertenencias de postergación de animación.

Propiedades CSS no animables

Otra razón por la que la animación no funciona es que quizás esté intentando animar una propiedad CSS que no se puede animar.

La animación CSS no es compatible

Las animaciones CSS funcionan en la mayoría de los navegadores móviles y de computadora actuales. Sin embargo, sus animaciones no funcionarán si está utilizando un navegador más antiguo o una versión de su navegador que no se ha actualizado en varios años, sin duda debido a la pérdida de la asistencia del navegador.

Si actualizó el navegador y aún tiene problemas, intente incluir sus políticas de animación con prefijos de proveedor más adelante en sus políticas auténticas e intente la animación nuevamente.

Taquigrafía CSS escrita incorrectamente

La taquigrafía CSS es una forma excelente de escribir CSS más limpio y reducir la cantidad de código en su archivo. Los elementos de animación son una abreviatura de esas casas CSS:

• período de animación
• animación-llamada
• animación-posponer
• animación-dirección
• modo de relleno de animación
• animación-iteración-confianza
• animación-juego-nación
• Función de temporización de animación

Se requieren dos valores, uno para el período de animación y otro para la llamada de animación. Además de eso, el orden de los valores determina qué precio se asigna a qué pertenencias de animación.

Los valores desalineados deberían provocar que la animación se comporte de forma distinta a la esperada. Por lo tanto, si el uso de la abreviatura de animación pertenece, asegúrese de que sus valores estén indexados dentro del orden correcto.

Rendimiento lento

Las animaciones CSS tienden a ser mejores para el rendimiento general que otros tipos de animaciones de Internet. Sin embargo, ahora ya no todas las animaciones CSS son iguales, y algunos patrones animados reducirán gradualmente el rendimiento general más que otros.

La mayoría de las animaciones CSS fáciles simplemente no tienen ningún efecto importante en los tiempos de carga de la página web. Sin embargo, cuanto mayores sean los resultados que cargue en su animación, es mucho más probable que tenga problemas de rendimiento general.

Para evitar un mal rendimiento general, Google recomienda restringir el uso de animaciones que provocan repintados. Una pintura es el navegador que crea la imagen visible de un píxel de una página web, con la ayuda del uso de píxeles en la pantalla. Las pinturas usan una cantidad notablemente grande de potencia de procesamiento, por lo que debe restringir la amplia variedad de repintados debido a las animaciones tanto como pueda.

Desafortunadamente, la mayoría de las casas CSS animables causan un repintado mientras se cambia. Las excepciones a esta transformación (para cosas como la escala, la rotación y la posición) y la opacidad, que pueden ser animadas con un impacto mínimo en el rendimiento general. Aquí hay una referencia para la cual las casas CSS causan repintados mientras están activos.

Aún así, no permita que eso lo disuada de desechar las animaciones por completo. Si tiene problemas de ritmo, probablemente se deba al hecho de que está buscando ejecutar muchos de inmediato o usar la animación para al menos un detalle masivo u organización de elementos.

En los sitios web, las animaciones CSS son de primera categoría, aunque se utilizan sutilmente para embellecer la experiencia, así que recuerde si desea o no una animación compleja para interactuar con los visitantes.

la última palabra

Sí, HubSpot te permite controlar la dirección de las animaciones usando el código CSS correcto. ¡Bien! Estoy totalmente de acuerdo en que la propiedad de dirección de animación CSS es algo que muchas personas desconocen.

Pero sí, después de leer este blog, seguramente estará familiarizado con las formas en que puede controlar las animaciones y darle un aspecto atractivo y fácil de usar al diseño de su sitio web. ¿Entonces, Qué esperas? Prepárese para crear un diseño que atraiga a su público objetivo.

Si aún necesita ayuda para diseñar un sitio, no dude en ponerse en contacto con nosotros. Nuestros expertos te ayudarán con lo mismo.

Editor: Divia