Como configurar o CSS Animation Keyframes

A linguagem HTML fornece a estrutura da página da web, e o CSS fornece o design e a formatação desse aplicativo. Essa combinação também permite adicionar animação, pois os elementos animados parecem mais atraentes em comparação com elementos estáticos. Também permite que um elemento mude seu estilo gradualmente.

Este artigo orientará como podemos aplicar animação aos elementos. Então, vamos começar!

O que são os quadros -chave de animação CSS?

Para fazer a animação, devemos vincular a animação ao elemento HTML. Para esse fim, use a palavra -chave “@KeyFrames”Seguido pelo nome da animação. Este componente especifica o início e o fim da animação.

Como configurar o CSS Animation Keyframes?

Para configurar os quadros -chave de animação no CSS, passaremos por dois exemplos.

Exemplo 1

Para configurar os quadros -chave de animação no CSS, execute as seguintes etapas:

• • Adicione um nome de classe “Principal-Div”.
  • Dentro da div, adicione outra div com o nome da classe “img-peng”.
  • Dentro deste Div IMG-Peng, adicione para colocar a imagem. Esta tag tem três atributos, o “src”Atributo para fornecer o caminho da imagem,“alt”É o texto alternativo que é adicionado se a imagem não for exibida e o“largura”Atributo para fornecer a largura da imagem.

Html

CSS

.main-div
largura: 90%;
Altura: 90px;
cor de fundo: RGB (67, 66, 87);
margem: 20px automático;
preenchimento: 10px;

No CSS, o “.Principal-Div”É adicionado para acessar a classe DIV. As propriedades aplicadas a ele são explicadas abaixo:

• • ““largura”O valor da propriedade define a largura da div.
  • ““altura”A propriedade é utilizada para definir a altura da div.
  • ““cor de fundo”A propriedade aplica a cor ao fundo do elemento.
  • ““margem"É definido como"20px Auto”, Que indica o espaço de cima e inferior, e automático significa espaço igual à esquerda e direita.
  • ““preenchimento”O valor da propriedade é atribuído como 10px, que aplica espaço em torno do conteúdo do elemento.

Estilo IMG-Peng Class

.img-peng
Largura: 50px;
Altura: 100px;
Posição: relativa;
Animação: Shake;
Animação-duração: 2s;
Função de Animação-Timing: 2s;
Contagem de Animação-Merada: Infinita;

O ".img-peng”É usado para acessar a classe DIV, mencionada no arquivo HTML acima. Este elemento div é denominado com propriedades discutidas abaixo:

• • ““largura”O valor da propriedade é utilizado para definir a largura do elemento.
  • ““altura”O valor da propriedade é utilizado para definir a altura do elemento.
  • ““posição”A propriedade recebe o valor“relativo”, O que significa que será posicionado em relação à sua posição normal.
  • ““animação”O nome é dado como“sacudir”. No entanto, você pode nomear a animação de acordo com o requisito.
  • ““duração da animação”Representa a duração da animação, que é de 2 segundos.
  • ““Função de animação-timing”Recebe um valor de 2s, o que significa em 2 segundos, a animação é concluída.
  • ““Contagem de animação-aladeração”É definido como infinito, o que significa que essa animação ocorrerá em um tempo infinito.

Defina @KeyFrames com as palavras -chave de e para as palavras -chave

@keyframes shake
de
Top: 50px;

para
Margin-Bottom: 200px;

A descrição dos quadros -chave de animação definida como a imagem está listada abaixo:

• • ““@KeyFrames Shake”Refere -se ao nome da animação Shake seguido pela palavra -chave @KeyFrames. Dentro desta regra, o comportamento da animação é especificado.
  • Dentro de seus colchetes encaracolados, o “de" e "para”As palavras -chave especificam diferentes intervalos para definir o comportamento da animação.
  • O "principal”A propriedade recebe o valor de 50px, o que significa que a animação começa a partir de 50px da parte superior da tela e continua até o 200px na parte inferior.

Como resultado, você verá a seguinte saída:

Agora, deixe a animação se comportar de maneira diferente em diferentes intervalos. Para fazer isso, utilize as porcentagens de animação nos @KeyFrames.

Especifique @keyframes com porcentagens

@keyframes shake
0%
Esquerda: -50px;

25%
Esquerda: 50px;

50%
Esquerda: -25px;

75%
Esquerda: 25px;

100%
Esquerda: 10px;

Portanto, a descrição do trecho de código acima é mencionada aqui:

• • Os valores percentuais de 0%, 25%, 50%, 75%e 100%representam a animação em diferentes intervalos.
  • Além disso, a 0%, o espaço à esquerda da imagem será “-50px”. Em 25%, o espaço para a esquerda será “50px”. Em 50%, o espaço para a esquerda será “-25px”. Em 75%, o espaço esquerdo será “25px”E quando a animação concluir (100%), o espaço esquerdo será“10px”.

O código acima exibe a seguinte animação:

Vamos dar outro exemplo para ver como podemos definir animações para as imagens.

Exemplo 2

Em HTML, adicione um nome de classe “página principal”. Dentro deste elemento, coloque mais duas tags div com classes “Cloud1" e "Cloud2”, Respectivamente.

Html

CSS

corpo
margem: 0;
preenchimento: 0;

No CSS, atribuiremos as seguintes propriedades CSS ao elemento corporal:

• • ““margem”Propriedade como 0 especifica não espaço ao redor do elemento.
  • ““preenchimento”Propriedade com o valor 0 não especifica espaço em torno do conteúdo do elemento.

Divis da página principal da página principal

.página principal
Imagem de fundo: URL (/Images/Wolf-Night.png);
Repetição de fundo: sem repetição;
Size de fundo: capa;
Altura: 100VH;
Posição: relativa;
estouro: oculto;

Aqui:

• • ““.página principal”É usado para acessar a classe div.
  • ““imagem de fundo”A propriedade recebe o valor“URL (/imagens/lobo-noite.png)”Onde imagens é a pasta que contém a imagem de lobo da imagem.png.
  • ““fundo de repetição”A propriedade recebe o valor“sem repetir, o que significa que a imagem será exibida uma vez.
  • ““tamanho de fundo”É definido como um“cobrir”Para preencher todo o elemento div.
  • ““altura”É 100VH, que é 100% da altura da viewport.
  • ““posição”Como parente define a posição da imagem em relação ao seu local atual.
  • ““transbordar”O valor da propriedade é definido como oculto para esconder a parte da imagem que é grande demais para se encaixar no contêiner.

Classe de Style Cloud1

.Cloud1
Imagem de fundo: URL (/imagens/nuvem.png);
tamanho de fundo: conter;
Repetição de fundo: sem repetição;
Posição: Absoluto;
topo: 100px;
Largura: 500px;
Altura: 300px;
Animação: Cloudanimation1;
Animação-duração: 70s;
Contagem de Animação-Merada: Infinita;

O Div Class Cloud1 é aplicado com as seguintes propriedades explicadas:

• • ““.Cloud1”É usado para acessar a classe Div Cloud1.
  • ““imagem de fundo”A propriedade é definida como URL (/imagens/nuvem.png), onde as imagens são a pasta que contém a nuvem de imagem.png.
  • ““tamanho de fundo"Com o valor"conter”Garante a visibilidade da imagem.
  • ““fundo de repetição”Propriedade com o valor definido como“sem repetir”Exibe a imagem como não repetida.
  • ““posição”Como posições absolutas, a imagem em relação ao elemento de seus pais.
  • ““principal”Propriedade define a imagem a 100px do topo.
  • ““largura”A propriedade é utilizada para definir a largura do elemento div para 500px.
  • ““altura”A propriedade é utilizada para definir a altura do elemento div para 300px.
  • ““animação”É atribuído o nome Cloudanimation1.
  • ““duração da animação”Representa a duração da animação, que é de 70 segundos.
  • ““Contagem de animação-aladeração”É atribuído o valor infinito, que irá iterar os tempos infinitos de animação.

Até agora, aplicamos as propriedades CSS à Página principal da classe Div e Cloud1. Agora, na próxima seção, iremos estilizar a próxima classe div chamada Cloud2.

Classe de estilo Cloud2

.Cloud2
Imagem de fundo: URL (/imagens/nuvem.png);
tamanho de fundo: conter;
Repetição de fundo: sem repetição;
Posição: Absoluto;
Top: 50px;
Largura: 200px;
Altura: 300px;
Animação: Cloudanimation2;
Animação-duração: 15s;
Contagem de Animação-Merada: Infinita;

O Div Class Cloud2 é aplicado com as propriedades que são explicadas abaixo:

• • ““.Cloud2”É usado para acessar a classe Cloud2.
  • ““imagem de fundo”A propriedade é definida como URL (/imagens/nuvem.png), onde a imagem é uma pasta que contém a nuvem de imagem.png.
  • ““tamanho de fundo”Contém um valor garante que a visibilidade da imagem.
  • ““fundo de repetição”Propriedade com o valor definido como sem repetição exibe a imagem como não repetida.
  • ““posição”Como posições absolutas, a imagem em relação ao elemento de seus pais.
  • ““principal”Propriedade define a imagem a 100px do topo.
  • ““largura”A propriedade é utilizada para definir a largura do elemento div.
  • ““altura”A propriedade é utilizada para definir a altura do elemento div.
  • ““animação”É atribuído o nome Cloudanimation2.
  • ““duração da animação”Representa a duração da animação.
  • ““Contagem de animação-aladeração”É atribuído o valor infinito, que irá iterar os tempos infinitos de animação.

Especifique @KeyFrames para Cloudanimation1

@KeyFrames Cloudanimation1
para
Esquerda: 0px;

de
Esquerda: 100%;

O Cloud1 Div está vinculado a animação descrita abaixo:

• • ““@KeyFrames Cloudanimation1”O nome da animação Cloudanimation1 é seguido pela palavra -chave @KeyFrames que é usada para especificar a transição.
  • A palavra -chave @keyframes especifica como a animação é feita do início ao fim nas imagens da nuvem.
  • O "para" e "de”As palavras -chave especificam que a nuvem1 se moverá de 100% para o 0px da tela.

Especifique @KeyFrames para Cloudanimation2

@KeyFrames Cloudanimation2
0%
Esquerda: 0%;

100%
Esquerda: 100%;

O Div Class Cloud2 está associado à animação que é explicada abaixo:

• • ““@KeyFrames Cloudanimation2”Representa o nome da animação Cloudanimation2 seguido pela palavra -chave @KeyFrames que é usada para especificar a animação.
  • O "0%" e "100%”Representam o início e o fim da animação.
  • A 0% da animação, a nuvem ficaria à esquerda com o valor definido como 0% e gradualmente se moverá para 100% da largura.

Saída

Isso é legal! Discutimos como podemos especificar a animação para os elementos usando a palavra -chave @keyframes com sucesso.

Conclusão

CSS nos permite aplicar estilos aos elementos HTML. A animação no CSS realiza transições de um estilo para outro. Consiste em dois componentes, os estilos de animação e os quadros -chave. Os estilos de animação representam propriedades diferentes, como seu nome, duração da animação, contagem de animação-aleragem e muito mais. Enquanto o componente do quadro -chave define o início e o fim da animação. Este guia elaborou como configurar os quadros -chave de animação com exemplos.