Cómo animar GIF en el documento HTML?

Muchas personas usan imágenes, gifs animados y colores atractivos para que sus sitios web se vean más atractivos. Gracias a HTML, que ofrece el ""Elemento para insertar imágenes y gifs en la página web. Más específicamente, un GIF es una colección de imágenes o un video sin sonido que se reproduce automáticamente sin un botón de reproducción. Podemos animar estos gifs en CSS utilizando el "animación" propiedad.

Este artículo guiará sobre:

• Cómo agregar GIF en el documento HTML?
• Cómo animar GIF en el documento HTML?

Cómo agregar GIF en el documento HTML?

Siga los pasos para agregar un GIF a la página HTML:

• En primer lugar, agregue un elemento div y asigne un nombre de clase "estilo gif".
• Para agregar un GIF, agregue un ""Elemento con los atributos" Alt "y" SRC ".
• El "SRC"Sostiene la URL del GIF, y el"alternativo"El atributo contiene el texto alternativo, que se muestra cuando la imagen no puede cargarse en la página web:

Se puede observar que el GIF se ha agregado al documento HTML con éxito:

Cómo animar GIF en HTML?

Los GIF ya son imágenes animadas, pero los usuarios pueden mejorarlas utilizando las propiedades CSS. Por esta causa, eche un vistazo a las propiedades dadas.

Elemento de estilo "cuerpo"

cuerpo
Color de fondo: RGB (102 204 204);

El CSS "color de fondoLa propiedad se utiliza para ajustar el color de fondo en toda la página.

Producción

Elemento de estilo "img"

.IMG de estilo gif
Ancho: 250px;
Arriba: 50px;
Posición: Absoluto;
Derecha: 0;
Animación: animado-gif 15s infinito;

El "img"Elemento del"estilo gif"Div se establece con estas propiedades:

• "ancho"La propiedad determina el ancho del GIF.
• "arriba"Genera espacio para el elemento desde arriba.
• "posición"Establece la posición del elemento en la página. Es valioso "absoluto"Se refiere al ajuste de GIF en relación con el cuerpo del documento.
• "bien"La propiedad se establece en el valor"0", Lo que significa que no hay espacio a la derecha de la imagen.
• "animación"¿Es la propiedad abreviada que especifica los valores para el nombre de la animación, la duración de la animación, el conteo de iteración de animación.

Aplicar las reglas de @Keyframe

@Keyframes animated-gif
0%
transformación: traduceX (300px);

100%
transformación: traduceX (-600px);

El nombre de la animación "GIF animado"Especificado en el código anterior se utiliza para establecer las reglas @KeyFrame para el GIF:

• Al 0% de la animación, el GIF se reubica en "300px"En el eje X.
• Al 100% de la animación, el GIF se ajusta en "-600px"En el eje X.

Producción

La salida ha verificado que el GIF se ha animado con éxito usando CSS.

Conclusión

Para incrustar GIF en documentos HTML, el ""El elemento se utiliza con el"SRC"Atributo, que contiene la URL del GIF. Aunque estos GIF ya están animados, podemos agregar más animaciones usando el CSS "animación" propiedad. El "@KeyframeLas reglas se especifican para determinar el comportamiento de animación. Esta publicación ha demostrado cómo animar GIF en documentos HTML.