Con el fin de embellecer su diseño web, se recomienda agregar animaciones. Las animaciones se denominan un cambio suave en el estilo del elemento. CSS le permite agregar animaciones a varios elementos con gran facilidad.

Al aplicar animaciones a varios elementos CSS, debe indicar algunos fotogramas clave para la animación. El @Keyframes La regla especifica que un elemento cambiará su estilo actual a uno especificado en momentos particulares. Además, debe adjuntar una animación a un elemento particular para que funcione la animación.

Hay varias propiedades de animación de CSS que se utilizan con el propósito de agregar animaciones a varios elementos CSS, hemos discutido estas propiedades a continuación.

Propiedades de animación CSS

CSS proporciona varias propiedades de animación que se explican en detalle a continuación.

nombre de animación

Esta propiedad se usa para definir un nombre para el @Keyframes.

Sintaxis

Nombre de animación: ninguno | Keyframename | inicial | heredar;

El Keyframename El parámetro define un nombre para el plazo clave que desea adjuntar a un elemento.

Ejemplo
Considere el ejemplo a continuación para comprender cómo funciona esta propiedad.

Html

Hola Mundo

Aquí hemos definido un

elemento en el que aplicaremos el efecto de animación.

CSS

pag
tamaño de fuente: 30px;
Posición: relativo;
Nombre de animación: animación;
Duración de animación: 5s;

@Keyframes Animation
Desde izquierda: 0px;
a izquierda: 200px;

Antes de aplicar el efecto de animación, primero hemos establecido el tamaño de fuente y la posición del párrafo. Más tarde, hemos asignado el nombre de los marcos clave y usando la regla @Keyframes, estamos definiendo que la animación hará que el párrafo se mueva de 0px a 200px desde la izquierda.

Tenga en cuenta que es importante establecer la duración de la animación, de lo contrario no funcionará.

Producción

La animación funciona correctamente.

duración de la animación

Esta propiedad define el tiempo que debe tomar una animación para terminar un ciclo.

Sintaxis

Duración de animación: Tiempo | inicial | heredar;

El parámetro de tiempo define el tiempo de la animación.

Ejemplo
Así es como puedes establecer la duración de una animación.

Html

Simplemente hemos definido un elemento div.

CSS

div
Ancho: 100px;
Altura: 100px;
Color de fondo: marrón;
Posición: relativo;
Nombre de animación: animación;
Duración de animación: 3s;

@Keyframes Animation
Desde izquierda: 0px;
a izquierda: 200px;

Además de diseñar el contenedor Div, hemos establecido la duración de la animación en 3 segundos. Esto significa que la animación continuará jugando durante 3 segundos.

Producción

La animación se está reproduciendo durante 3 segundos.

mínimo de animación

Esta propiedad define el período de espera antes de que comience la animación.

Sintaxis

Animación-Delay: Tiempo | inicial | heredar;

El parámetro de tiempo define el tiempo de espera antes de que comience la animación, sin embargo, es opcional.

Ejemplo
Supongamos que desea retrasar su animación durante 2 segundos y luego siga el código a continuación.

CSS

div
Ancho: 100px;
Altura: 100px;
Color de fondo: marrón;
Posición: relativo;
Nombre de animación: animación;
Duración de animación: 5s;
Animación-retraso: 2s;

@Keyframes Animation
Desde izquierda: 0px;
a izquierda: 200px;

El código anterior especifica que el contenedor Div se moverá de 0px a 200px desde la izquierda durante 5 segundos después de un período de espera de 2 segundos.

Producción

La animación se retrasó durante 2 segundos y luego comenzó según lo deseado.

función de animación

Esta propiedad define la curva de aceleración de la animación.

Sintaxis

Animación-Timing-Function: Facilidad | lineal | Facilidad | Facilidad | Facilia-out | cúbico-bezier (n, n, n, n);

Todos los parámetros se explican a continuación.

• facilidad: La animación ocurre de manera lenta y lenta.
• lineal: La animación tendrá la misma velocidad desde el principio.
• facilidad en: La animación tendrá un comienzo lento.
• Facilitarse: La animación tendrá un final lento.
• Facilia: La animación tendrá un comienzo lento y un final lento.
• Cúbico-Bezier (N, N, N, N): Los valores de la animación se establecerán de manera cúbica.

Ejemplo
El ejemplo a continuación muestra el parámetro facilidad de la propiedad en discusión.

CSS

div
Nombre de animación: animación;
Duración de animación: 5s;
Animación-Timing-Function: Facily;

@Keyframes Animation
Desde izquierda: 0px;
a izquierda: 200px;

Hemos establecido el valor de la función de estimación de animación para facilitar, por lo tanto, la animación ocurrirá de manera lenta y lenta.

Producción

La animación se está reproduciendo de manera lenta y lenta.

conteo de iteración de animación

Esta propiedad define cuántas veces se reproducirá una animación.

Sintaxis

Animación-iteración-conteo: Número | Infinito | inicial | heredar;

El parámetro número define el número de veces que se reproducirá una animación, mientras que el parámetro infinito define que la animación jugará infinitamente.

Ejemplo
Comprendamos el funcionamiento de la propiedad de conteo de iteración de animación utilizando el siguiente ejemplo.

CSS

div
Nombre de animación: animación;
Duración de animación: 5s;
Animación-iteración-conteo: 2;

@Keyframes Animation
Desde top: 0px;
a top: 100px;

El código anterior define que la animación hará que el contenedor Div se mueva de 0px a 100px desde la parte superior durante 5 segundos dos veces.

Producción

La animación se reproduce dos veces como se especifica en el código.

dirección de animación

Esta propiedad define la dirección en la que se moverá la animación. Las instrucciones pueden ser hacia adelante, hacia atrás o cambiar entre ambos.

Sintaxis

Dirección de animación: Normal | reverso | Alternativo | alternativo-reverse | heredar | inicial;

Todos los parámetros se explican a continuación.

• normal: Este es un parámetro predeterminado que reproduce la animación hacia adelante.
• contrarrestar: Este parámetro reproduce la animación en la dirección inversa.
• alterno: Este parámetro reproduce la animación primero en la dirección hacia adelante, y luego en la dirección inversa.
• Reverse alternativo: Este parámetro reproduce la animación primero en la dirección inversa y luego en la dirección hacia adelante.

Ejemplo
El siguiente ejemplo demuestra el parámetro alternativo-reverso de la propiedad de dirección de animación.

Html

Hola Mundo

Hemos creado un encabezado.

CSS

H1
color marrón;
Posición: relativo;
Nombre de animación: animación;
Duración de animación: 3s;
Animación-iteración-conteo: Infinite;
Dirección de animación: alternativo-reverso;

@Keyframes Animation
de izquierda: 0px; color marrón;
a izquierda: 100px; color amarillo;

El código anterior establece que el encabezado se moverá infinitamente durante 3 segundos de 0px a 100px desde la izquierda en un cambio de moda alternativo-reverso entre los colores marrón y amarillo.

Producción

La propiedad de la dirección de animación se implementó con éxito.

modo de llenado de animación

Esta propiedad define el estilo de un elemento en el momento en que la animación no está reproduciendo. Esto significa qué estilo tendrá el elemento antes de que comience la animación, después de que termine o ambos.

Sintaxis

Modo de llenado de animación: Ninguno | hacia adelante | al revés | Ambos | heredar | inicial;

Todos los parámetros se explican a continuación.

• ninguno: Este es un parámetro predeterminado que da estilo al elemento antes o después de que ocurra la animación.
• hacia adelante: Este parámetro mantiene el estilo de un elemento definido por el último fotograma clave.
• hacia atrás: Este parámetro mantiene el estilo de un elemento definido por el primer cuadro de clave y se aferra a este estilo durante el tiempo de retraso de la animación.
• ambos: Este parámetro cambia entre los parámetros hacia adelante y hacia atrás.

Ejemplo
Veamos cómo funciona el parámetro de reenvío siguiendo el ejemplo a continuación.

Html

Simplemente hemos creado un contenedor Div.

CSS

div
Ancho: 100px;
Altura: 100px;
Color de fondo: marrón;
Posición: relativo;
Nombre de animación: animación;
Duración de animación: 3s;
Modo de llenado de animación: hacia adelante;

@Keyframes Animation
Desde izquierda: 0px;
a izquierda: 100px; Color de fondo: amarillo;

En el código anterior, hemos establecido la propiedad de modo de llenado de animación en el parámetro reenviado.

Producción

El contenedor Div tiene un color de fondo amarillo cuando la animación se detiene y no se reproduce.

animación-juego-estado

Esta propiedad define si la animación se está ejecutando o se detiene.

Sintaxis

Animación-juego-estado: Ejecutar | Paused | heredar | inicial;

El correr El parámetro es un valor predeterminado que especifica que la animación está ejecutando, mientras que el detenido El parámetro especifica que la animación se detiene.

Ejemplo
Supongamos que desea detener una animación utilizando la propiedad de animación-juego-estado. Así es como lo haces.

CSS

div
Nombre de animación: animación;
Duración de animación: 3s;
Animación-juego-estado: Pause;

@Keyframes Animation
Desde izquierda: 0px;
a izquierda: 100px;

El código anterior especifica que la animación se detendrá.

Producción

La animación se detuvo con éxito.

animación

Esta propiedad es una propiedad abreviada para todas las propiedades anteriores.

Sintaxis

animación: ;

Ejemplo
Considere el ejemplo a continuación para comprender la propiedad de animación.

CSS

div
Animación: Animación 3S Infinite Alternate;

@Keyframes Animation
de izquierda: 0px; Color de fondo: Brown;
a izquierda: 200px; Color de fondo: amarillo;

Estamos especificando que la animación jugará infinitamente durante 3 segundos de manera alternativa.

Producción

La propiedad de animación funciona correctamente.

Conclusión

Las animaciones se denominan un cambio gradual en el estilo de un elemento. CSS proporciona varias propiedades de animación que son las siguientes: nombre de animación, duración de la animación, retraso de la animación, función de tiempo de animación, conteo de iteración de animación, dirección de animación, modo de relleno de animación, estado de animación-play, estado de juego, y animación. Todas estas propiedades se utilizan para especificar el comportamiento del efecto de animación que se aplica en varios elementos HTML. En esta guía, todas estas propiedades se explican con la ayuda de ejemplos relevantes.