Este artigo demonstra o processo de adição de animações e transições de várias etapas.
Como usar animações e transições de várias etapas?
Para fazer uma animação de várias etapas, uma série de quadros-chave é gerada. Ele especifica a série de alterações a serem aplicadas ao elemento HTML selecionado. Cada quadro-chave representa um estado diferente da animação e o navegador faz a transição suave do elemento entre esses estados. Durante as transições, especifique a alteração suave das propriedades CSS durante uma duração especificada por interações do usuário ou alterações de estado.
Vamos a um exemplo prático para melhor compreensão:
Exemplo 1: Aplicando Animação Multi-Step
Neste exemplo, uma animação de várias etapas será aplicada ao elemento HTML selecionado. Visite a demonstração abaixo:
< estilo >
.animationExample {
largura: 130px;
altura: 130px;
cor de fundo: verde floresta;
posição: relativa;
animação: moveAnimate 4s facilidade de entrada e saída infinita;
}
< / estilo >
< corpo >
< div aula = 'exemplo de animação' >< / div >
< / corpo >
No trecho de código acima:
- Primeiro, a classe chamada “ exemplo de animação ” é selecionado dentro do “
' marcação. - Em seguida, os valores de “ 130px ” são atribuídos ao “ altura ' e ' largura ” propriedades.
- Além disso, defina “ verde floresta ' e ' relativo ” como um valor para o “ cor de fundo ' e ' posição ” propriedades para melhorar a visualização.
- Depois disso, use o “ animação ” e defina-a igual a “ moveAnimate 4s facilidade de entrada infinitamente ” para aplicar animações.
- O valor consiste em quatro partes, a primeira é o nome personalizado da animação, a segunda é a duração do tempo para ser concluída, a terceira é o tipo de animação e a quarta é o limite de quantas vezes essa animação será aplicada.
- No final, crie um elemento HTML e atribua o “ exemplo de animação ” para isso.
Agora, use o “ quadros-chave ” regra para definir o costume “ moveAnimate ' animação:
@ quadros-chave moveAnimate {0 % {
esquerda: 0 ;
cor de fundo: azul;
}
cinquenta % {
esquerda: 200px;
cor de fundo: verde floresta;
transformar: girar ( 180 graus ) ;
}
100 % {
esquerda: 0 ;
cor de fundo: azul;
}
}
No bloco de código acima:
- Primeiro, o “ @keyframes ” é criado juntamente com o nome da animação personalizada que será definida.
- Em seguida, crie um bloco chamado “ 0% ” que aplica estilos CSS no início da animação. E utilizar o “ cor de fundo ' e ' esquerda ” Propriedades CSS.
- Agora, crie um bloco chamado e “ cinquenta% ” para estilizar no meio da animação. Ele fornece os valores de “ 200px ”, “ verde floresta ' e ' girar (180 graus) ” para as propriedades “left”, “background-color” e “transform”. Isso permite que o elemento selecionado gire 200px à esquerda.
Após a compilação do bloco de código acima:
A saída mostra que a animação de várias etapas foi aplicada ao elemento HTML selecionado.
Exemplo 2: Aplicando a Transição de Várias Etapas
Para aplicar a transição de várias etapas, os seletores CSS podem ser utilizados junto com o “ transição ' propriedade. Acesse o código abaixo:
.desaparecer {
opacidade: 1;
transição: opacidade 1s;
}
.fade:hover {
opacidade: 0;
}
<
/ estilo>
<
corpo>
< p aula = 'desaparecer' > Passe o mouse sobre mim para ver a transição. < / p >
< / corpo >
A explicação do código acima:
- Primeiro, o costume “ desaparecer ” é selecionada e o valor 1 é fornecido para a classe “ opacidade ' propriedade. Além disso, defina o valor de “ opacidade 1s ' para o ' transição ” propriedade CSS. Isso define ou remove a opacidade em um período de “ 1s ”.
- A seguir, o “ :flutuar ” é atribuído ao seletor “ desaparecer ' aula. Nela, o valor de “ 0 ” é definido como a propriedade de opacidade.
- No final, o elemento HTML é criado dentro do “
” e a classe de “ desaparecer ” está anexado a ele.
Após o final da fase de compilação, a página da Web aparece assim:
O GIF mostra que a transição de esmaecimento personalizada foi aplicada ao elemento HTML selecionado.
Conclusão
As animações e transições de várias etapas dão vida às páginas da Web em HTML, adicionando movimento e efeitos visuais. Para animação, o “ quadros-chave ”são utilizados junto com a porcentagem de duração como“ 0% ” é o começo, “ cinquenta% ” é o meio, e “ 100% ” é o fim da duração da animação. Para a transição, o seletor CSS pode ser usado junto com o “ transição ' aula. Este artigo demonstrou o processo de usar animações e transições de várias etapas.