Este artículo demuestra el proceso de agregar animaciones y transiciones de varios pasos.
¿Cómo usar animaciones y transiciones de varios pasos?
Para hacer una animación de varios pasos, se genera una serie de fotogramas clave. Especifica la serie de cambios que se aplicarán al elemento HTML seleccionado. Cada fotograma clave representa un estado diferente de la animación, y el navegador cambia suavemente el elemento entre estos estados. Durante las transiciones, especifique el cambio suave de las propiedades de CSS durante una duración específica mediante interacciones del usuario o cambios de estado.
Veamos un ejemplo práctico para una mejor comprensión:
Ejemplo 1: aplicación de animación de varios pasos
En este ejemplo, se aplicará una animación de varios pasos al elemento HTML seleccionado. Visite la siguiente demostración:
< estilo >
.animaciónEjemplo {
ancho: 130px;
altura: 130px;
color de fondo: verde bosque;
posición: relativa;
animación: moveAnimate 4s facilidad de entrada y salida infinita;
}
< / estilo >
< cuerpo >
< división clase = 'ejemplo de animación' >< / división >
< / cuerpo >
En el fragmento de código anterior:
- Primero, la clase llamada “ animaciónEjemplo ” está seleccionado dentro del “
' etiqueta. - A continuación, los valores de “ 130px ” se asignan al “ altura ' y ' ancho ' propiedades.
- Además, establezca “ bosque verde ' y ' relativo ” como un valor para el “ color de fondo ' y ' posición ” propiedades para mejorar la visualización.
- Después de eso, use el ' animación ” propiedad y configúrelo igual a “ moveAnimate 4s entra y sale infinitamente ” para aplicar animaciones.
- El valor consta de cuatro partes, la primera es la animación de nombre personalizado, la segunda es el tiempo de duración para completar, la tercera es el tipo de animación y la cuarta es el límite de cuántas veces se aplicará esta animación.
- Al final, crea un elemento HTML y asigna el ' animaciónEjemplo ” clase a la misma.
Ahora, usa el ' fotogramas clave 'regla para definir la costumbre' moverAnimar ” animación:
@ moverAnimar fotogramas clave {0 % {
izquierda: 0 ;
color de fondo: azul;
}
50 % {
izquierda: 200px;
color de fondo: verde bosque;
transformar: rotar ( 180 grados ) ;
}
100 % {
izquierda: 0 ;
color de fondo: azul;
}
}
En el bloque de código anterior:
- Primero el ' @fotogramas clave El bloque se crea junto con el nombre de la animación personalizada que se va a definir.
- A continuación, cree un bloque llamado ' 0% ” que aplica estilos CSS al comienzo de la animación. Y utiliza el “ color de fondo ' y ' izquierda ” Propiedades CSS.
- Ahora, crea un bloque llamado y “ 50% ” al estilo en medio de la animación. Proporciona los valores de “ 200px ”, “ bosque verde ' y ' rotar (180 grados) ” a las propiedades “left”, “background-color” y “transform”. Esto permite que el elemento seleccionado gire a la izquierda 200px.
Después de la compilación del bloque de código anterior:
El resultado muestra que la animación de varios pasos se ha aplicado al elemento HTML seleccionado.
Ejemplo 2: aplicación de una transición de varios pasos
Para aplicar la transición de varios pasos, los selectores de CSS se pueden utilizar junto con el ' transición ' propiedad. Visita el siguiente código:
.desteñir {
opacidad: 1;
transición: opacidad 1s;
}
.desvanecerse: flotar {
opacidad: 0;
}
<
/ estilo>
<
cuerpo>
< pag clase = 'desteñir' > Pase el cursor sobre mí para ver la transición. < / pag >
< / cuerpo >
La explicación del código anterior:
- Primero, la costumbre” desteñir Se selecciona la clase ” y se proporciona el valor de 1 al “ opacidad ' propiedad. Además, establezca el valor de “ opacidad 1s ' hacia ' transición ” Propiedad CSS. Esto establece o elimina la opacidad en un tiempo de duración de “ 1s ”.
- A continuación, el “ :flotar El selector ” está asignado al “ desteñir ' clase. En él, el valor de “ 0 ” se establece en la propiedad de opacidad.
- Al final, el elemento HTML se crea dentro del '
” etiqueta, y la clase de “ desteñir ” está adjunto.
Después del final de la fase de compilación, la página web aparece así:
El GIF muestra que la transición de fundido personalizado se ha aplicado al elemento HTML seleccionado.
Conclusión
Las animaciones y transiciones de varios pasos dan vida a las páginas web HTML al agregar movimiento y efectos visuales. Para la animación, el “ fotogramas clave ” se utilizan junto con el porcentaje de duración como “ 0% ” es el comienzo, “ 50% ” es el medio, y “ 100% ” es el final de la duración de la animación. Para la transición, el selector CSS se puede usar junto con el “ transición ' clase. Este artículo ha demostrado el proceso de usar transiciones y animaciones de varios pasos.