Cómo configurar las fotogramas de animación de CSS

El lenguaje HTML proporciona la estructura de la página web, y CSS proporciona el diseño y el formato de esa aplicación. Esta combinación también le permite agregar animación, ya que los elementos animados se ven más atractivos en comparación con los elementos estáticos. También permite que un elemento cambie su estilo gradualmente.

Este artículo guiará cómo podemos aplicar la animación a los elementos. Vamos a empezar!

¿Cuáles son los cuadros de animación de CSS??

Para hacer la animación, debemos unir la animación al elemento HTML. Para este propósito, use la palabra clave "@Keyframes"Seguido del nombre de la animación. Este componente especifica el inicio y el final de la animación.

Cómo configurar las fotogramas de animación de CSS?

Para configurar los cuadros de animación en CSS, pasaremos por dos ejemplos.

Ejemplo 1

Para configurar los cuadros de animación en CSS, realice los siguientes pasos:

• • Agregue un nombre de clase "principal".
  • Dentro del Div, agregue otro Div con el nombre de la clase "img-peng".
  • Dentro de este Div Img-Peng, agregue para colocar la imagen. Esta etiqueta tiene tres atributos, el "SRC"Atributo para proporcionar la ruta de imagen", "alternativo"Es el texto alternativo que se agrega si no se muestra la imagen y el"ancho"Atributo para proporcionar el ancho de la imagen.

Html

CSS

.principal-div
Ancho: 90%;
Altura: 90px;
Color de fondo: RGB (67, 66, 87);
Margen: 20px Auto;
relleno: 10px;

En CSS, el ".principal"Se agrega para acceder a la clase Div. Las propiedades aplicadas a ella se explican a continuación:

• • "ancho"El valor de la propiedad define el ancho del DIV.
  • "alturaLa propiedad se utiliza para establecer la altura del DIV.
  • "color de fondo"La propiedad aplica el color al fondo del elemento.
  • "margen"Está configurado como"20px Auto", Que indica el espacio de arriba e inferior, y automáticamente significa un espacio igual de izquierda y derecha.
  • "rellenoEl valor de la propiedad se asigna como 10px, que aplica el espacio alrededor del contenido del elemento.

Clase de estilo img-peng

.img-peng
Ancho: 50px;
Altura: 100px;
Posición: relativo;
Animación: Shake;
Duración de animación: 2s;
Animación-Timing-Function: 2s;
Animación-iteración-conteo: Infinite;

El ".img-peng"Se usa para acceder a la clase DIV, mencionada en el archivo HTML anterior. Este elemento div está diseñado con propiedades que se analizan a continuación:

• • "anchoEl valor de la propiedad se utiliza para establecer el ancho del elemento.
  • "alturaEl valor de la propiedad se utiliza para establecer la altura del elemento.
  • "posiciónSe asigna a la propiedad el valor "relativo", Lo que significa que se colocará en relación con su posición normal.
  • "animación"El nombre se da como"agitar". Sin embargo, puede nombrar animación de acuerdo con el requisito.
  • "duración de la animación"Representa la duración de la animación, que es 2 segundos.
  • "función de animación"Se le asigna un valor de 2s, lo que significa que en 2 segundos, la animación se completa.
  • "conteo de iteración de animación"Se establece como infinito, lo que significa que esta animación ocurrirá en un tiempo infinito.

Definir @Keyframes con y desde las palabras clave

@Keyframes Shake
de
Arriba: 50px;

a
Margen-Bottom: 200px;

La descripción de los cuadros de teclas de animación establecidos en la imagen se enumera a continuación:

• • "@Keyframes Shake"Se refiere al Shake Name de animación seguido de la palabra clave @Keyframes. Dentro de esta regla, se especifica el comportamiento de la animación.
  • Dentro de sus soportes rizados, el "de" y "a"Las palabras clave especifican diferentes intervalos para definir el comportamiento de animación.
  • El "arribaSe le asigna a la propiedad el valor de 50px, lo que significa que la animación comienza desde 50px desde la parte superior de la pantalla y continúa al 200px en la parte inferior.

Como resultado, verá la siguiente salida:

Ahora, deje que la animación se comporte de manera diferente a diferentes intervalos. Para hacerlo, utilice los porcentajes de animación en @Keyframes.

Especificar @Keyframes con porcentajes

@Keyframes Shake
0%
Izquierda: -50px;

25%
Izquierda: 50px;

50%
Izquierda: -25px;

75%
Izquierda: 25px;

100%
Izquierda: 10px;

Entonces, la descripción del fragmento de código anterior se menciona aquí:

• • Los valores de porcentaje 0%, 25%, 50%, 75%y 100%representan la animación a diferentes intervalos.
  • Además, al 0%, el espacio a la izquierda de la imagen será "-50px". Con un 25%, el espacio a la izquierda será "50px". Con un 50%, el espacio a la izquierda será "-25px". Con un 75%, el espacio izquierdo será "25px", Y cuando la animación se complete (100%), el espacio izquierdo será"10px".

El código anterior muestra la siguiente animación:

Tomemos otro ejemplo para ver cómo podemos establecer animaciones en las imágenes.

Ejemplo 2

En html, agregue un nombre de clase "pagina principal". Dentro de este elemento, coloque dos etiquetas Div más con clases "nube1" y "nube2", Respectivamente.

Html

CSS

cuerpo
margen: 0;
relleno: 0;

En CSS, asignaremos las siguientes propiedades CSS al elemento del cuerpo:

• • "margen"Propiedad como 0 no especifica espacio alrededor del elemento.
  • "relleno"La propiedad con el valor 0 no especifica espacio alrededor del contenido del elemento.

Estilo Página principal Div

.pagina principal
IMAGEN DE BUENGE: URL (/Images/Wolf-Night.png);
Background-Repeat: sin repetición;
tamaño de fondo: cubierta;
Altura: 100 VH;
Posición: relativo;
desbordamiento: oculto;

Aquí:

• • ".pagina principal"Se usa para acceder a la clase Div.
  • "imagen de fondoSe asigna a la propiedad el valor "URL (/Images/Wolf-Night.PNG)"Donde las imágenes son la carpeta que contiene la imagen de lobo lobo.png.
  • "repeticiónSe asigna a la propiedad el valor "sin repetición, lo que significa que la imagen se mostrará una vez.
  • "tamaño de fondo"Se establece como un"cubrir"Para llenar todo el elemento div Div.
  • "altura"Es 100 VH, que es el 100% de la altura de la ventana gráfica.
  • "posición"A medida que el relativo establece la posición de la imagen en relación con su ubicación actual.
  • "Desbordamiento"El valor de la propiedad se establece como oculto para ocultar la parte de la imagen que es demasiado grande para caber en el contenedor.

Clase de estilo Cloud1

.Cloud1
IMAGEN DE FINTER: URL (/Images/Cloud.png);
tamaño de fondo: contener;
Background-Repeat: sin repetición;
Posición: Absoluto;
arriba: 100px;
Ancho: 500px;
Altura: 300px;
Animación: Cloudanimation1;
Duración de animación: 70s;
Animación-iteración-conteo: Infinite;

La clase Div Cloud1 se aplica con las siguientes propiedades explicadas:

• • ".nube1"Se usa para acceder a la clase Div Cloud1.
  • "imagen de fondoLa propiedad se establece como URL (/Images/Cloud.png), donde las imágenes son la carpeta que contiene la nube de imágenes.png.
  • "tamaño de fondo"Con el valor"contener"Asegura la visibilidad de la imagen.
  • "repetición"Propiedad con el valor establecido como"sin repetición"Muestra la imagen como no repetida.
  • "posición"Como posiciones absolutas, la imagen en relación con el elemento de su padre.
  • "arribaLa propiedad establece la imagen en 100px desde la parte superior.
  • "anchoSe utiliza la propiedad para establecer el ancho del elemento div en 500px.
  • "alturaSe utiliza la propiedad para establecer la altura del elemento Div en 300px.
  • "animación"Se le asigna el nombre CloudAnimation1.
  • "duración de la animación"Representa la duración de la animación, que es 70 segundos.
  • "conteo de iteración de animación"Se le asigna el valor infinito, que iterará los tiempos infinitos de la animación.

Hasta ahora, hemos aplicado las propiedades de CSS a la clase principal Div y Cloud1. Ahora, en la siguiente sección, peinaremos la próxima clase Div llamada Cloud2.

Clase de estilo Cloud2

.Cloud2
IMAGEN DE FINTER: URL (/Images/Cloud.png);
tamaño de fondo: contener;
Background-Repeat: sin repetición;
Posición: Absoluto;
Arriba: 50px;
Ancho: 200px;
Altura: 300px;
Animación: Cloudanimation2;
Duración de animación: 15s;
Animación-iteración-conteo: Infinite;

La clase Div Cloud2 se aplica con las propiedades que se explican a continuación:

• • ".nube2"Se usa para acceder a la clase Cloud2.
  • "imagen de fondoLa propiedad se establece como URL (/Images/Cloud.png), donde la imagen es una carpeta que contiene la nube de imagen.png.
  • "tamaño de fondo"Contiene un valor asegurarse de que la visibilidad de la imagen.
  • "repeticiónPropiedad "con el valor establecido como sin repetición muestra la imagen como no repetido.
  • "posición"Como posiciones absolutas, la imagen en relación con el elemento de su padre.
  • "arribaLa propiedad establece la imagen en 100px desde la parte superior.
  • "anchoLa propiedad se utiliza para establecer el ancho del elemento Div.
  • "alturaLa propiedad se utiliza para establecer la altura del elemento Div.
  • "animación"Se le asigna el nombre CloudAnimation2.
  • "duración de la animación"Representa la duración de la animación.
  • "conteo de iteración de animación"Se le asigna el valor infinito, que iterará los tiempos infinitos de la animación.

Especificar @Keyframes para CloudAnimation1

@Keyframes Cloudanimation1
a
Izquierda: 0px;

de
Izquierda: 100%;

El Div Cloud1 está vinculado con animación que se describe a continuación:

• • "@Keyframes Cloudanimation1"El nombre de Animation Cloudanimation1 es seguido por la palabra clave @Keyframes que se usa para especificar la transición.
  • La palabra clave @Keyframes especifica cómo se realiza la animación de principio a fin en las imágenes en la nube.
  • El "a" y "de"Las palabras clave especifican que Cloud1 se moverá del 100% al 0px de la pantalla.

Especificar @Keyframes para CloudAnimation2

@Keyframes Cloudanimation2
0%
Izquierda: 0%;

100%
Izquierda: 100%;

La clase Div Cloud2 se asocia con la animación que se explica a continuación:

• • "@Keyframes Cloudanimation2"Representa el nombre de la animación CloudAnimation2 seguido de la palabra clave @Keyframes que se usa para especificar la animación.
  • El "0%" y "100%"Representa el comienzo y el final de la animación.
  • Al 0% de la animación, la nube estaría a la izquierda con el valor establecido como 0%, y gradualmente se moverá al 100% del ancho.

Producción

Eso es genial! Hemos discutido cómo podemos especificar la animación a los elementos utilizando la palabra clave @Keyframes con éxito.

Conclusión

CSS nos permite aplicar estilos a elementos HTML. La animación en CSS realiza transiciones de un estilo a otro. Consiste en dos componentes, los estilos de animación y los cuadros clave. Los estilos de animación representan diferentes propiedades como su nombre, duración de la animación, conteo de iteración de animación y más. Mientras que el componente del cuadro clave define el comienzo y el final de la animación. Esta guía elaboró ​​cómo configurar los cuadros de animación con ejemplos.