Como animar GIFs no documento HTML?

Muitas pessoas usam imagens, GIFs animados e cores atraentes para fazer com que seus sites pareçam mais atraentes. Graças ao HTML, isso oferece o “”Elemento para incorporar imagens e gifs na página da web. Mais especificamente, um GIF é uma coleção de imagens ou um vídeo sem som que é reproduzido automaticamente sem um botão de reprodução. Podemos animar esses GIFs no CSS, utilizando o “animação" propriedade.

Este artigo irá guiar sobre:

• Como adicionar GIFs no documento HTML?
• Como animar GIFs no documento HTML?

Como adicionar GIFs no documento HTML?

Siga as etapas para adicionar um GIF à página HTML:

• Em primeiro lugar, adicione um elemento div e atribua um nome de classe “estilo gif”.
• Para adicionar um GIF, adicione um “”Elemento com os atributos“ Alt ”e“ SRC ”.
• O "src”Parece o URL do GIF e o“alt”O atributo contém o texto alternativo, que é exibido quando a imagem não pode carregar na página da web:

Pode -se observar que o GIF foi adicionado ao documento HTML com sucesso:

Como animar gifs em html?

Os GIFs já são imagens animadas, mas os usuários podem melhorá -los usando as propriedades CSS. Por essa causa, dê uma olhada nas propriedades dadas.

Elemento de "corpo" de estilo

corpo
Background-Color: RGB (102 204 204);

O CSS “cor de fundo”A propriedade é usada para ajustar a cor de fundo em toda a página.

Saída

Elemento de estilo “img”

.IMG no estilo GIF
Largura: 250px;
Top: 50px;
Posição: Absoluto;
Direita: 0;
Animação: Infinito de GIF de GIF animado;

O "img”Elemento do“estilo gif”Div está definido com estas propriedades:

• ““larguraA propriedade determina a largura do GIF.
• ““principal”Gera espaço para o elemento do topo.
• ““posição”Define a posição do elemento na página. Seu valor “absoluto”Refere -se ao ajuste do GIF em relação ao corpo do documento.
• ““certo”A propriedade está definida como o valor“0”, O que significa nenhum espaço à direita da imagem.
• ““animação”É a propriedade abreviada que especifica os valores para o nome da animação, duração da animação, contagem de animação-existeração.

Aplicando regras @KeyFrame

@KeyFrames Animated-Gif
0%
Transform: translatex (300px);

100%
Transform: translatex (-600px);

O nome da animação “Gif Animado”Especificado no código acima é utilizado para definir as regras @KeyFrame para o GIF:

• A 0% da animação, o GIF é realocado em “300px”No eixo x.
• Com 100% da animação, o GIF é ajustado em “-600px”No eixo x.

Saída

A saída verificou que o GIF foi animado com sucesso usando CSS.

Conclusão

Para incorporar GIFs em documentos HTML, o “”O elemento é utilizado com o“src”Atributo, que detém o URL do GIF. Embora esses GIFs já estejam animados, podemos adicionar mais animações usando o CSS “animação" propriedade. O "@KeyFrame”As regras são especificadas para determinar o comportamento da animação. Este post demonstrou como animar os GIFs em documentos HTML.