¿Cómo reproducir múltiples animaciones CSS al mismo tiempo?

Este artículo muestra una demostración práctica para reproducir/agregar múltiples animaciones CSS al mismo tiempo.

¿Cómo reproducir múltiples animaciones CSS al mismo tiempo?

Al aplicar múltiples animaciones CSS al mismo tiempo, los desarrolladores pueden crear fácilmente interfaces más atractivas. Para reproducir muchas animaciones CSS al mismo tiempo, asigne a cada una un nombre único y aplique esos nombres al mismo componente oa componentes separados en la página.

Siga el procedimiento a continuación para reproducir/agregar más de una animación al mismo tiempo.

Paso 1: Creación de Estructura

Primero, cree un elemento HTML en el que se apliquen las animaciones en los próximos pasos. Por ejemplo, la imagen se va a insertar:

En el fragmento de código anterior:

• Primero, la ruta de la imagen se establece en ' origen ' atributo.
• A continuación, el valor de “ 100px ” se proporciona a las propiedades de “ancho” y “alto” de CSS.
• Además, establezca el valor de “ animar ' hacia ' clase ' atributo.

Paso 2: Configuración de animaciones

El ' fotogramas clave ” se utilizan para crear animaciones personalizadas según la necesidad de la página web. Por ejemplo, se crean dos animaciones en el siguiente fragmento de código:

En el fragmento de código anterior:

• Primero el ' @-webkit-keyframes Se está utilizando un mecanismo para configurar girar ' y ' girar ” llamado animaciones.
• A continuación, utilice el ' transformar ” propiedad que tiene un valor de “ girar() ' en el ' girar cuerpo de animación. Esta función gira el elemento en un ángulo de “ 180 grados ”.
• Después de eso, configure la animación que crece o extiende el elemento original por un factor de ' 1 ” tanto en el “ X ' y ' Y ” eje en el “ escala cuerpo de animación.

Paso 3: Aplicar Animación en Elementos HTML

Dentro de la parte de CSS, seleccione la clase ' animar ” que se asigna a la “ ” y proporcione las siguientes propiedades CSS:

Descripción de las propiedades utilizadas en el bloque de código anterior:

• Primero, establezca el valor de “ absoluto ” al CSS “ posición ' propiedad. Alinea el “ imagen ” elemento según la animación.
• Luego, proporcione los valores de “ 60% ”, “ 110px ' y ' 110px ” al CSS “ izquierda ”, “ ancho ' y ' altura ' propiedades. Estas propiedades se utilizan para establecer la posición y el tamaño de un elemento.
• Después de eso, establezca el valor de “ escala 3s infinito lineal ' hacia ' -webkit-animación ” Propiedad CSS.
• Y el ' 3s ” es la duración de esa animación, el “ infinito ” es la duración de la animación, y el “ lineal ” es la dirección de la animación.
• Al final, proporcione los valores de “ spin 2s infinito lineal ” al CSS “ -webkit-animación ' propiedad. Esta propiedad agrega la segunda animación denominada “ girar ' sobre el ' imagen ' elemento.

Después de la compilación del bloque de código anterior, la animación se ve así:

El gif anterior ilustra que solo “ girar La animación se está reproduciendo en el elemento objetivo.

Paso 4: reproducir varias animaciones en elementos HTML

Como en el paso anterior, solo se ha aplicado una animación al elemento. Esto se debe a que se han asignado múltiples valores al mismo “ -webkit-animación ' propiedad.

Para resolver este problema, ajuste el elemento de destino con otro elemento HTML. como el “ división ” ya se usa como contenedor en el primer paso, seleccione su “ durar ” y actualice el código como:

En el código anterior:

• Al principio, el “ animar La clase ” sigue siendo la misma y solo se elimina la segunda animación que se coloca en el “ durar ' clase.
• Después de eso, establezca la posición utilizando el botón “ posición ' y ' arriba ' propiedades.

Después de la ejecución del fragmento de código anterior, la página web ahora aparece así:

El resultado muestra que ambas animaciones se han aplicado al elemento HTML seleccionado al mismo tiempo.

Conclusión

Para aplicar varias propiedades CSS, envuelva el elemento con elementos HTML y aplíqueles animaciones para que cada elemento HTML contenga una sola animación. Como la propiedad secundaria hereda la animación aplicada en el elemento HTML principal, se aplican múltiples animaciones sin causar errores o ambigüedad para el compilador. Ese es el procedimiento para reproducir/agregar más de una animación CSS al mismo tiempo.