Enfeite seu site usando essas dicas e truques de animação.
Animações e transições são uma parte importante do web design. Adicionar animações sutis à sua página da Web a tornará mais atraente. Animações simples como ícones animados, tipografia cinética e logotipos animados podem ajudar a aprimorar a experiência do usuário. Aprenda cinco truques incríveis de animação que podem ajudá-lo a dar vida ao seu site.
1. Transformando um elemento ao passar o mouse
Uma prática de design comum é ter um elemento que aumenta quando interage. Por exemplo, você pode querer traduzir os botões um pouco para cima quando alguém passa o mouse sobre eles. Você pode conseguir isso usando o CSS transformar propriedade.
Supondo que você tenha um botão:
<botão>
clique em mim
botão>
Você estilizou o corpo do documento, bem como o botão:
/* Alinha o botão ao centro da página */
corpo {
mostrar: flex;
altura: 100vh;
itens de alinhamento: Centro;
justificar-conteúdo: Centro;
cor de fundo: preto;
}/* Estiliza o botão */
: 1em 2em;
botão {
preenchimento
fundo: azul;
fronteira: 0;
cor: branco;
raio da borda: 0.25rem;
cursor: ponteiro;
tamanho da fonte: 2rem;
transição: transformar 500EM;
}
/* Estados de foco */
botão:flutuar,
botão:foco {
transformar: traduzirY(00,75rem) 500EM;
}
Com o último bloco, você está definindo os estados de focalização e foco no botão. Em ambos os estados, você translada o botão ao longo do eixo Y em 0,75 rem. O botão ficaria assim:
Quando você passa o mouse sobre o botão, ele se movimenta para cima. A transição leva meio segundo (500 ms) para ser concluída. Este é um padrão que você pode implementar não apenas em seus botões, mas também em outros elementos (por exemplo, imagens).
2. Declarando vários quadros-chave com uma declaração
Outro padrão comum em animações CSS é iterar sobre o mesmo valor várias vezes. Pode ser uma cor, tamanho ou orientação específicos. Você pode conseguir isso utilizando Animações de quadro-chave CSS declarando vários quadros-chave com uma declaração.
Considere o botão que você criou na seção anterior. Talvez você queira repetir várias cores de fundo ao clicar no botão. Mas você também deseja repassar a mesma cor em diferentes estágios da animação. Vamos ver como conseguir isso no código.
Primeiro, você deseja animar o botão somente quando clicado. Então você criaria um script.js arquivo, dentro do qual você acessa o botão e alterna uma classe no botão quando é clicado:
const botão = documento.querySelector("botão")
botão.addEventListener("clique", (e) => {
botão.classList.toggle('hora da festa')
})
Usamos querySelector para acessar o botão da página da web. Para saber mais sobre travessia de DOM, leia nossa postagem em como percorrer o DOM usando JavaScript.
O hora da festa classe ativa uma animação intitulada festa:
.hora da festa {
animação: festa 2000EMinfinito;
}
Para a animação, você deseja começar com vermelho e fazer a transição para amarelo em 25%. Então você voltaria para o vermelho em 50% antes de voltar para o amarelo em 75%. Finalmente, em 100%, você se contentaria com uma cor azul escuro:
@keyframes festa {
0%, 50% {
cor de fundo: vermelho;
}
25%, 75% {
cor de fundo: amarelo;
}
100% {
cor de fundo: hsl(200, 72%, 35%);
}
}
Essa abordagem é bastante útil para alternar cores em um plano de fundo baseado em cores. Como você pode repetir vários quadros-chave em uma variável, fica muito fácil usar a mesma propriedade em diferentes estágios da animação.
3. Usando @property para animar propriedades personalizadas
Como você já deve saber, nem todas as propriedades em CSS são animáveis. O oficial Documentação da Mozilla mantém um registro atualizado de todas as propriedades CSS animáveis. Se você deseja animar uma propriedade não animável, sua melhor solução seria usar o @propriedade diretiva.
Comece alterando a cor de fundo do seu botão para um gradiente linear:
botão {
// outroCSS
fundo: Gradiente linear(90grau, azul, verde);
// outroCSS
}
Aqui está a saída:
Muitas vezes, você deseja animar o gradiente de cores no botão. Embora existam truques que você pode usar para mover seu gradiente, não é possível animá-lo. Isto é porque fundo (assim como imagem de fundo) não é uma propriedade animável. é aqui @propriedade entra.
O @propriedade A diretiva permite que você registre propriedades personalizadas. quando você usa @propriedade, você deve fornecer três valores, ou seja, sintaxe, herda, e valor inicial:
@propriedade --cor-1 {
sintaxe: "<cor>";
herda: verdadeiro;
valor inicial: vermelho;
}
@propriedade --cor-2 {
sintaxe: "<cor>";
herda: verdadeiro;
valor inicial: azul;
}
A primeira é a propriedade inicial enquanto a segunda é a propriedade de destino. Agora, em vez de fazer a transição de uma imagem de plano de fundo (que você não pode fazer a transição), você faria a transição de --cor-1 para --cor-2 (suas propriedades personalizadas) em um segundo:
botão {
transição: --cor-1 1000EM, --cor-2 1000EM;
}
Essa técnica é útil porque você também pode adicionar outras personalizações. Por exemplo, você adiciona um atraso para proporcionar uma experiência mais suave. As possibilidades são infinitas.
4. Usando atrasos de animação negativa
Atrasos de animação são cruciais para criar animações suaves. Vamos ver um exemplo disso em ação. Nesta parte, adicione um div elemento com 15 pontos em cima do botão:
<divaula="pontos">
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
<divaula="ponto">div>
div>
Aqui estão alguns estilos básicos para transformar cada criança div em um ponto:
.pontos {
mostrar: flex;
brecha: .5rem;
margem inferior: 20px;
}
.ponto {
largura: 10px;
proporção da tela: 1;
cor de fundo: vermelho;
raio da borda: 50%;
}
Aqui usamos Flexbox para colocar os pontos em uma linha horizontal. Para mergulhar fundo no Flexbox, você pode conferir nosso Tutorial CSS Flexbox.
Dentro script.js, adicione o código que aciona a animação dos pontos. Você está alternando o dança classe nos pontos:
botão.addEventListener("clique", (e) => {
botão.classList.toggle('hora da festa')
// Novo Código
pontos.forEach((ponto) => {
ponto.classList.toggle('dança')
})
})
A aula de dança ativa uma animação intitulada ascender:
.ponto.dança {
animação: ascender 2000EMinfinitoalternar;
}Quanto à animação, basta traduzir os pontos -100px ao longo do eixo Y:
@keyframes ascender {
100% {
transformar: traduzirY(-100px)
}
}Agora é hora de fazer algo interessante. Em vez de os pontos subirem ao mesmo tempo, você deseja animar os pontos para que fluam como uma onda. Para conseguir isso, você deve adicionar atraso de animação aos pontos e incremente cada ponto em 100ms:
.ponto:enésimo filho (1) {
atraso de animação: 100EM;
}
.ponto:enésimo filho (2) {
atraso de animação: 200EM;
}
.ponto:enésimo filho (3) {
atraso de animação: 300EM;
}
.ponto:enésimo filho (4) {
atraso de animação: 400EM;
}
/* Continue fazendo até chegar ao 15º ponto */
Isso cria uma animação elegante onde os pontos se movem para cima e para baixo em uma forma ondulada. A imagem a seguir captura os pontos no meio da animação:
Tenha em mente que isso pode ser problemático, o que nos leva à quinta dica.
5. Use preferências de movimento reduzido para ativar as preferências
Tenha sempre em mente que muitas pessoas não gostam de animações baseadas em movimento. Na verdade, a maioria dos usuários tem preferências no navegador que podem desativar o movimento. O movimento pode distrair os sentidos e, em casos graves, causar náuseas.
Felizmente, você pode facilmente resolver isso envolvendo sua animação dentro de um sem preferência consulta de mídia assim:
@meios de comunicação(prefere movimento reduzido: sem preferência) {
.ponto.dança {
animação: ascender 2000EMinfinitoalternar;
}
}Agora, se você habilitar prefere movimento reduzido no seu navegador, a animação não seria executada.
Saiba mais dicas e truques de CSS
O CSS está cheio de truques incríveis que vão além de animações e transições. Por exemplo, existem dicas e truques para tornar todo o seu layout elegante e responsivo. As práticas podem ajudá-lo a tornar seu site mais envolvente, acessível e agradável de navegar. Se você quer ser um dos melhores desenvolvedores de CSS, ter alguns truques na manga ajuda muito.
