El lenguaje HTML proporciona la estructura de la página web y CSS proporciona el diseño y 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!
¿Qué son los fotogramas clave de animación CSS?
Para realizar la animación, debemos vincular la animación al elemento HTML. Para ello, utilice la palabra clave “ @fotogramas clave ” seguido del nombre de la animación. Este componente especifica el inicio y el final de la animación.
¿Cómo configurar fotogramas clave de animación CSS?
Para configurar fotogramas clave de animación en CSS, veremos dos ejemplos.
Ejemplo 1
Para configurar fotogramas clave de animación en CSS, realice los siguientes pasos:
-
- Agregue un que tenga el nombre de clase ' principal-div ”.
- Dentro del div, agregue otro div con el nombre de clase ' img-peng ”.
- Dentro de este div img-peng, agregue
para colocar la imagen. Esta etiqueta tiene tres atributos, el “ origen ” atributo para proporcionar la ruta de la imagen, “ todo ” es el texto alternativo que se agrega si la imagen no se muestra, y el “ ancho ” atributo para proporcionar el ancho de la imagen.
HTML
< división clase = 'principal-div' >
< división clase = 'img-peng' >
< imagen origen = 'imágenes/pingüino.png' todo = 'pingüino' ancho = '100' >
división >
división >
.main-div {
CSS
ancho: 90 % ;
altura: 90px;
color de fondo: rgb ( 67 , 66 , 87 ) ;
margen: 20px automático;
relleno: 10px;
}
En CSS, el “ .main-div ” se agrega para acceder a la clase div. Las propiedades que se le aplican se explican a continuación:-
- “ ancho El valor de la propiedad define el ancho del div.
- “ altura La propiedad ” se utiliza para establecer la altura del div.
- “ color de fondo La propiedad ” aplica color al fondo del elemento.
- “ margen ” se establece como “ 20px coche ”, que indica el espacio desde arriba y desde abajo, y auto significa el mismo espacio desde la izquierda y la derecha.
- “ relleno El valor de la propiedad se asigna como 10px, lo que aplica espacio alrededor del contenido del elemento.
Clase de estilo img-peng
.img-peng {
ancho: 50px;
altura: 100px;
posición: relativa;
animación: agitar;
animación-duración: 2s;
función de temporización de animación: 2 s;
animación-iteración-recuento: infinito;
}
Los ' .img-peng ” se utiliza para acceder a la clase div, mencionada en el archivo HTML anterior. Este elemento div tiene un estilo con las propiedades que se analizan a continuación:-
- “ ancho El valor de la propiedad se utiliza para establecer el ancho del elemento.
- “ altura El valor de la propiedad se utiliza para establecer la altura del elemento.
- “ posición 'a la propiedad se le asigna el valor' pariente ”, lo que significa que se colocará en relación con su posición normal.
- “ animación ” nombre se da como “ sacudir ”. Sin embargo, puede nombrar la animación de acuerdo con el requisito.
- “ duración de la animación ” representa la duración de la animación, que es de 2 segundos.
- “ función de temporización de animación ” se le asigna un valor de 2s, lo que significa que en 2 segundos, la animación se completa.
- “ recuento de iteraciones de animación ” está configurado como infinito, lo que significa que esta animación ocurrirá en un tiempo infinito.
Definir @keyframes con palabras clave de a y de
@ temblor de fotogramas clave {
de {
arriba: 50px;
}
a {
margen inferior: 200px;
}
}
La descripción de los fotogramas clave de animación establecidos en la imagen se enumera a continuación:-
- “ @keyframes agitar ” se refiere al movimiento del nombre de la animación seguido de la palabra clave @keyframes. Dentro de esta regla, se especifica el comportamiento de la animación.
- Dentro de sus corchetes, el ' de ' y ' a Las palabras clave especifican diferentes intervalos para definir el comportamiento de la animación.
- Los ' parte superior A la propiedad se le asigna el valor de 50 px, lo que significa que la animación comienza desde 50 px desde la parte superior de la pantalla y continúa hasta los 200 px en la parte inferior.
Como resultado, verá el siguiente resultado:
Ahora, deje que la animación se comporte de manera diferente en diferentes intervalos. Para hacerlo, utilice los porcentajes de animación en @keyframes.Especifique @keyframes con porcentajes
@ temblor de fotogramas clave {
0 % {
izquierda: -50px ;
}
25 % {
izquierda: 50px;
}
50 % {
izquierda: -25 píxeles ;
}
75 % {
izquierda: 25px;
}
100 % {
izquierda: 10px;
}
}
Entonces, la descripción del fragmento de código anterior se menciona aquí:-
- Los valores porcentuales 0%, 25%, 50%, 75% y 100% representan la animación en diferentes intervalos.
- Además, al 0%, el espacio a la izquierda de la imagen será “ -50px ”. Al 25%, el espacio a la izquierda será “ 50px ”. Al 50%, el espacio a la izquierda será “ -25px ”. Al 75%, el espacio que queda será “ 25px ', y cuando la animación se complete (100%), el espacio a la izquierda será ' 10px ”.
El código anterior muestra la siguiente animación:
Tomemos otro ejemplo para ver cómo podemos configurar animaciones a las imágenes.Ejemplo 2
En HTML, agregue un
que tenga el nombre de clase ' pagina principal ”. Dentro de este elemento, coloque dos etiquetas div más con clases ' nube1 ' y ' nube2 ”, respectivamente.HTML
< división clase = 'pagina principal' >
< división clase = 'nube1' > división >
< división clase = 'nube2' > división >
división >
cuerpo {
CSS
margen: 0 ;
relleno: 0 ;
}
En CSS, asignaremos las siguientes propiedades CSS al elemento del cuerpo:-
- “ margen La propiedad ” como 0 especifica que no hay espacio alrededor del elemento.
- “ relleno La propiedad ” con el valor 0 especifica que no hay espacio alrededor del contenido del elemento.
Div de página principal de estilo
.pagina principal {
imagen de fondo: url ( / imágenes / lobo-noche.png ) ;
repetición de fondo: sin repetición;
tamaño de fondo: portada;
altura: 100vh;
posición: relativa;
desbordamiento: oculto;
}
Aquí:-
- “ .pagina principal ” se utiliza para acceder a la clase div.
- “ imagen de fondo 'a la propiedad se le asigna el valor' url(/images/lobo-noche.png) ” donde imágenes es la carpeta que contiene la imagen lobo-noche.png.
- “ repetición de fondo 'a la propiedad se le asigna el valor' no-repeat , 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.
- “ altura ” es 100vh, que es el 100 % de la altura de la ventana gráfica.
- “ posición ” como 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.
Estilo nube1 clase
.cloud1 {
imagen de fondo: url ( / imágenes / nube.png ) ;
tamaño de fondo: contener;
repetición de fondo: sin repetición;
posición: absoluta;
arriba: 100px;
ancho: 500px;
altura: 300px;
animación: animación en la nube1;
animación-duración: 70s;
animación-iteración-recuento: infinito;
}
La clase div cloud1 se aplica con las siguientes propiedades explicadas:-
- “ .cloud1 ” se utiliza para acceder a la clase div cloud1.
- “ imagen de fondo ” se establece como url(/images/cloud.png), donde images es la carpeta que contiene la imagen cloud.png.
- “ tamaño de fondo ” con el valor “ contener ” asegura la visibilidad de la imagen.
- “ repetición de fondo ” propiedad con el valor establecido como “ no-repeat ” muestra la imagen como no repetida.
- “ posición ” como posición absoluta de la imagen en relación con el elemento de su padre.
- “ parte superior La propiedad ” establece la imagen a 100 px desde la parte superior.
- “ ancho La propiedad ” se utiliza para establecer el ancho del elemento div en 500 px.
- “ altura La propiedad ” se utiliza para establecer la altura del elemento div en 300 px.
- “ animación ” se le asigna el nombre cloudanimation1.
- “ duración de la animación ” representa la duración de la animación, que es de 70 segundos.
- “ recuento de iteraciones de animación ” tiene asignado el valor infinite, que iterará la animación infinitas veces.
Hasta ahora, hemos aplicado las propiedades CSS a la página principal de la clase div y cloud1. Ahora, en la siguiente sección, diseñaremos la próxima clase div llamada cloud2.
Clase de estilo cloud2
.cloud2 {
imagen de fondo: url ( / imágenes / nube.png ) ;
tamaño de fondo: contener;
repetición de fondo: sin repetición;
posición: absoluta;
arriba: 50px;
ancho: 200px;
altura: 300px;
animación: animación en la nube2;
animación-duración: 15s;
animación-iteración-recuento: infinito;
}
Se aplica la clase div cloud2 con las propiedades que se explican a continuación:-
- “ .cloud2 ” se utiliza para acceder a la clase cloud2.
- “ imagen de fondo ” se establece como url(/images/cloud.png), donde la imagen es una carpeta que contiene la imagen cloud.png.
- “ tamaño de fondo ” contiene un valor que asegura la visibilidad de la imagen.
- “ repetición de fondo ” con el valor establecido como sin repetición muestra la imagen como sin repetición.
- “ posición ” como posición absoluta de la imagen en relación con el elemento de su padre.
- “ parte superior La propiedad ” establece la imagen a 100 px desde la parte superior.
- “ ancho La propiedad ” se utiliza para establecer el ancho del elemento div.
- “ altura La 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.
- “ recuento de iteraciones de animación ” tiene asignado el valor infinite, que iterará la animación infinitas veces.
Especifique @keyframes para cloudanimation1
@ fotogramas clave cloudanimation1 {
a {
izquierda: 0px;
}
de {
izquierda: 100 % ;
}
}
El div cloud1 está vinculado con la animación que se describe a continuación:-
- “ @keyframes cloudanimation1 El nombre de la animación cloudanimation1 va seguido de la palabra clave @keyframes que se utiliza 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 de la nube.
- Los ' a ' y ' de Las palabras clave especifican que cloud1 se moverá del 100% al 0px de la pantalla.
Especifique @keyframes para cloudanimation2
@ fotogramas clave cloudanimation2 {
0 % {
izquierda: 0 % ;
}
100 % {
izquierda: 100 % ;
}
}
La clase div cloud2 está asociada a la animación que se explica a continuación:-
- “ @fotogramas clave cloudanimation2 ” representa el nombre de la animación cloudanimation2 seguido de la palabra clave @keyframes que se usa para especificar la animación.
- Los ' 0% ' y ' 100% ” representan el inicio y el final de la animación.
- Al 0% de la animación, la nube estaría a la izquierda con el valor establecido en 0%, y se moverá gradualmente al 100% del ancho.
Producción
¡Eso es genial! Hemos discutido cómo podemos especificar la animación de los elementos usando 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. Consta de dos componentes, los estilos de animación y los fotogramas clave. Los estilos de animación representan diferentes propiedades, como su nombre, la duración de la animación, el número de iteraciones de la animación y más. Mientras que el componente de fotograma clave define el principio y el final de la animación. Esta guía explica cómo configurar fotogramas clave de animación con ejemplos.
- Agregue un