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 os 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 Keyframes de Animação CSS?
Para fazer a animação, devemos vincular a animação ao elemento HTML. Para isso, use a palavra-chave “ @keyframes ” seguido do nome da animação. Este componente especifica o início e o fim da animação.
Como configurar quadros-chave de animação CSS?
Para configurar quadros-chave de animação em CSS, veremos dois exemplos.
Exemplo 1
Para configurar quadros-chave de animação em CSS, execute as seguintes etapas:
-
- Adicione um com o nome da classe “ div principal ”.
- Dentro do div, adicione outro 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 “ origem ” atributo para fornecer o caminho da imagem, “ tudo ” é o texto alternativo que é adicionado se a imagem não for exibida, e o “ largura ” para fornecer a largura da imagem.
HTML
< div classe = 'div principal' >
< div classe = 'img-peng' >
< img origem = 'imagens/pinguim.png' tudo = 'pinguim' largura = '100' >
div >
div >
.main-div {
CSS
largura: 90 % ;
altura: 90px;
cor de fundo: rgb ( 67 , 66 , 87 ) ;
margem: 20px automático;
preenchimento: 10px;
}
Em CSS, o “ .main-div ” é adicionado para acessar a classe div. As propriedades aplicadas a ele são explicadas abaixo:-
- “ largura ” O valor da propriedade define a largura do div.
- “ altura ” é utilizada para definir a altura do div.
- “ cor de fundo ” aplica a cor ao fundo do elemento.
- “ margem ” é definido como “ 20px carro ”, que indica o espaço de cima e de baixo, e auto significa espaço igual à esquerda e à direita.
- “ preenchimento ” O valor da propriedade é atribuído como 10px, que aplica espaço ao redor do conteúdo do elemento.
Classe img-peng de estilo
.img-peng {
largura: 50px;
altura: 100px;
posição: relativa;
animação: agitar;
duração da animação: 2s;
função de temporização da animação: 2s;
contagem de iterações de animação: infinita;
}
O ' .img-peng ” é usado para acessar a classe div, mencionada no arquivo HTML acima. Este elemento div é estilizado com as 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 ” é atribuído o valor “ relativo ”, o que significa que ele será posicionado em relação à sua posição normal.
- “ animaçã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 tempo de animação ” é atribuído um valor de 2s, o que significa que em 2 segundos, a animação é concluída.
- “ contagem de iterações de animação ” é definido como infinito, o que significa que essa animação ocorrerá em tempo infinito.
Defina @keyframes com palavras-chave de e para
@ quadros-chave tremem {
a partir de {
topo: 50px;
}
para {
margem inferior: 200px;
}
}
A descrição dos quadros-chave de animação definidos para a imagem está listada abaixo:-
- “ @keyframes sacudir ” refere-se ao shake do nome da animação seguido pela palavra-chave @keyframes. Dentro desta regra, o comportamento da animação é especificado.
- Dentro de seus colchetes, o “ a partir de ' e ' para ” As palavras-chave especificam diferentes intervalos para definir o comportamento da animação.
- O ' topo ” é atribuído o valor de 50px, o que significa que a animação começa em 50px na parte superior da tela e continua até 200px na parte inferior.
Como resultado, você verá a seguinte saída:
Agora, deixe a animação se comportar de maneira diferente em intervalos diferentes. Para fazer isso, utilize as porcentagens de animação no arquivo @keyframes.Especifique @keyframes com porcentagens
@ quadros-chave tremem {
0 % {
deixei: -50px ;
}
25 % {
esquerda: 50px;
}
cinquenta % {
deixei: -25px ;
}
75 % {
esquerda: 25px;
}
100 % {
esquerda: 10px;
}
}
Portanto, a descrição do trecho de código acima é mencionada aqui:-
- Os valores percentuais 0%, 25%, 50%, 75% e 100% representam a animação em diferentes intervalos.
- Além disso, em 0%, o espaço à esquerda da imagem será “ -50px ”. Em 25%, o espaço à esquerda será “ 50px ”. Em 50%, o espaço à esquerda será “ -25px ”. Em 75%, o espaço à esquerda será “ 25px ”, e quando a animação terminar (100%), o espaço à esquerda 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
com o nome da classe “ página principal ”. Dentro deste elemento, coloque mais duas tags div com as classes “ nuvem1 ' e ' nuvem2 ”, respectivamente.HTML
< div classe = 'página principal' >
< div classe = 'nuvem1' > div >
< div classe = 'nuvem2' > div >
div >
corpo {
CSS
margem: 0 ;
preenchimento: 0 ;
}
Em CSS, atribuiremos as seguintes propriedades CSS ao elemento body:-
- “ margem ” como 0 não especifica nenhum espaço ao redor do elemento.
- “ preenchimento ” com o valor 0 não especifica nenhum espaço ao redor do conteúdo do elemento.
Div da página principal de estilo
.página principal {
background-image: url ( / imagens / noite de lobo.png ) ;
repetição de fundo: sem repetição;
tamanho do plano de fundo: capa;
altura: 100vh;
posição: relativa;
estouro: oculto;
}
Aqui:-
- “ .página principal ” é usado para acessar a classe div.
- “ imagem de fundo ” é atribuído o valor “ url(/images/wolf-night.png) ” onde images é a pasta que contém a imagem wolf-night.png.
- “ fundo de repetição ” é atribuído o valor “ sem repetição , 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 relativo define a posição da imagem em relação à sua localização atual.
- “ transbordar ” O valor da propriedade é definido como oculto para ocultar a parte da imagem que é muito grande para caber no contêiner.
Estilizar classe cloud1
.cloud1 {
background-image: url ( / imagens / nuvem.png ) ;
tamanho do plano de fundo: contém;
repetição de fundo: sem repetição;
posição: absoluta;
topo: 100px;
largura: 500px;
altura: 300px;
animação: cloudanimation1;
duração da animação: 70s;
contagem de iterações de animação: infinita;
}
A classe div cloud1 é aplicada com as seguintes propriedades explicadas:-
- “ .cloud1 ” é usado para acessar a classe div cloud1.
- “ imagem de fundo ” é definida como url(/images/cloud.png), onde as imagens são a pasta que contém a imagem cloud.png.
- “ tamanho de fundo ” com o valor “ conter ” garante a visibilidade da imagem.
- “ fundo de repetição ” com o valor definido como “ sem repetição ” exibe a imagem como não repetida.
- “ posição ” como posições absolutas da imagem em relação ao elemento pai.
- “ topo ” define a imagem em 100px a partir do topo.
- “ largura ” é utilizada para definir a largura do elemento div para 500px.
- “ altura ” é utilizada para definir a altura do elemento div para 300px.
- “ animação ” recebe o nome cloudanimation1.
- “ duração da animação ” representa a duração da animação, que é de 70 segundos.
- “ contagem de iterações de animação ” é atribuído o valor infinito, que irá iterar a animação infinitas vezes.
Até agora, aplicamos as propriedades CSS à página principal da classe div e cloud1. Agora, na próxima seção, estilizaremos a próxima classe div chamada cloud2.
Estilo cloud2 classe
.cloud2 {
background-image: url ( / imagens / nuvem.png ) ;
tamanho do plano de fundo: contém;
repetição de fundo: sem repetição;
posição: absoluta;
topo: 50px;
largura: 200px;
altura: 300px;
animação: cloudanimation2;
duração da animação: 15s;
contagem de iterações de animação: infinita;
}
A classe div cloud2 é aplicada com as propriedades explicadas abaixo:-
- “ .cloud2 ” é usado para acessar a classe cloud2.
- “ imagem de fundo ” é definida como url(/images/cloud.png), onde a imagem é uma pasta que contém a imagem cloud.png.
- “ tamanho de fundo ” contém um valor que garante a visibilidade da imagem.
- “ fundo de repetição ” com o valor definido como sem repetição exibe a imagem como não repetida.
- “ posição ” como posições absolutas da imagem em relação ao elemento pai.
- “ topo ” define a imagem em 100px a partir do topo.
- “ largura ” é utilizada para definir a largura do elemento div.
- “ altura ” é utilizada para definir a altura do elemento div.
- “ animação ” recebe o nome cloudanimation2.
- “ duração da animação ” representa a duração da animação.
- “ contagem de iterações de animação ” é atribuído o valor infinito, que irá iterar a animação infinitas vezes.
Especifique @keyframes para cloudanimation1
@ quadros-chave cloudanimation1 {
para {
esquerda: 0px;
}
a partir de {
deixei: 100 % ;
}
}
O div cloud1 é vinculado à 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 ' a partir de ” as palavras-chave especificam que cloud1 passará de 100% para 0px da tela.
Especifique @keyframes para cloudanimation2
@ quadros-chave cloudanimation2 {
0 % {
deixei: 0 % ;
}
100 % {
deixei: 100 % ;
}
}
A classe div cloud2 está associada à animação 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.
- Em 0% da animação, a nuvem estaria à esquerda com o valor definido como 0% e gradualmente se moverá para 100% da largura.
Resultado
Que legal! Discutimos como podemos especificar animação para os elementos usando a palavra-chave @keyframes com sucesso.Conclusão
CSS nos permite aplicar estilos a elementos HTML. A animação em 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 nome, duração da animação, contagem de iteração da animação e muito mais. Considerando que o componente de quadro-chave define o início e o fim da animação. Este guia elaborou como configurar quadros-chave de animação com exemplos.
- Adicione um