Como criar animações incríveis com CSS
Imagine abrir um site e, de repente, ver todos os elementos aparecendo de uma vez, sem nenhum movimento. Parece um pouco sem vida, né?
Agora, imagine a mesma página, mas com elementos que deslizam suavemente, botões que pulsam quando você passa o mouse por cima e transições que tornam a navegação fluida e envolvente.
É uma diferença enorme! Animações em CSS podem transformar a experiência do usuário, tornando-a mais agradável e intuitiva.
Neste artigo você aprenderá:
- Transições básicas com
hoveretransition - Animações intermediárias usando
@keyframes - Efeitos avançados como parallax e loaders personalizados
E muito mais. Vamos lá?
Brincando com o hover e transition
Vamos começar com o básico. Imagine que você tem um botão no seu site. Ele parece bem comum e você quer que ele seja visualmente mais atrativo.
Você quer que quando a pessoa usuária interaja com esse botão, visualmente algo mude na página. Digamos que você tenha o seguinte código:
<button>Olá mundo</button>
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: green;
}
</style>No código acima, estilizamos o botão para que ele mude de estilo quando o usuário passa o mouse sobre ele. Usamos a propriedade transition para animar a mudança de cor do botão ao passar o mouse.
Além disso, especificamos que a propriedade a ser animada é o background-color e que essa transição deve ocorrer em 0,3 segundos.
Você também pode animar outras propriedades CSS, como width, height, background, color, entre outras, usando a transition.
Essa animação acontece de uma forma lenta no início, rápida no meio do tempo de duração, e bem ao finalzinho ela fica mais lenta novamente. Isso que acabei de descrever é uma função de tempo da animação dada pelo valor ease que passamos no código CSS.
Se quiser conhecer os diferentes valores dessa propriedade que define a função de tempo de animação que acontecerá, acesse aqui a documentação do W3Schools com todos os valores que você pode usar. Divirta-se!
Para que essa animação aconteça usamos o hover. O hover é um pseudo-classe que aplica um estilo específico quando o usuário interage com o elemento.
Ele é perfeito para que você adicione animações que acontecem apenas com algum tipo de interação do usuário com a página.
O resultado do código acima você confere logo abaixo:
See the Pen Mudança de Cor Suave by Neilton Seguins (@neiltonseguins) on CodePen.
Outro exemplo de animações que podemos fazer usando hover e transition é mostrado abaixo.
See the Pen Movimentação Suave by Neilton Seguins (@neiltonseguins) on CodePen.
Neste exemplo, a div se move 30px para a direita quando passamos o mouse sobre ela. A propriedade position: relative permite que a div seja movida em relação à sua posição original. O código CSS da animação acima você confere abaixo:
<div class="move">Move me!</div>
<style>
div.move {
position: relative;
left: 0;
padding: 10px;
background-color: lightcoral;
transition: left 0.5s ease-in-out;
}
div.move:hover {
left: 100px;
}
</style>Isso mostra que combinando as propriedades hover e transition, podemos criar animações interessantes para os elementos de nossa página.
Podemos animar basicamente qualquer elemento HTML, entre eles textos, botões, títulos, imagens e muito mais.
Agora que já conhecemos o básico de animações com CSS, vamos elevar um pouco o nível delas.
Conhecendo @keyframes
Até agora fizemos animações com o hover e o transition, para aplicar efeitos visuais em elementos aos quais os usuários da aplicação podem interagir. Mas e as animações que acontecem independente disso?
Por exemplo, você já deve ter visto páginas em que botões ficam pulsando na tela para chamar a sua atenção e você interagir com eles. Como isso é feito?
Efeito pulso
See the Pen Efeito de Pulso by Neilton Seguins (@neiltonseguins) on CodePen.
A gente pode usar uma regra CSS chamada de @keyframes para definir a animação de pulso. E como a gente faz a animação acima? Vamos usar o seguinte código:
<button class="button-pulse">Pulse me!</button>
<style>
.button-pulse {
padding: 10px 20px;
background-color: purple;
color: white;
border: none;
cursor: pointer;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>Usamos a propriedade animation no nosso elemento button para executar a animação chamada pulse, com duração de 1s e com função de tempo de valor infinito, ou seja, ela fica executando infinitamente.
E agora criamos a nossa animação usando o @keyframes nome_da_animacao. Para que a animação funcione, precisamos especificar quando a mudança de estilos acontecerá.
Podemos usar o from e to que é o mesmo que dizer de 0% a 100% ou usar valores específicos de porcentagem.
No nosso código, nós temos uma animação que em 0% tem uma escala de 1, em 50% esse valor muda para 1.1, ou seja, o botão aumenta de tamanho 10% em relação ao seu tamanho original, e em 100% esse valor de escala volta a ser de 1 novamente, isto é, o botão voltou ao tamanho original.
A propriedade transform é utilizada para alterar o tamanho do botão, criando o efeito de pulso, ela permite mover, girar, escalar e distorcer elementos.
Podemos usar o keyframes para criar animações populares como as de fade-in e fade-out, onde os elementos aparecem e somem da tela suavemente.
Efeito de fade-in
See the Pen Fade In by Neilton Seguins (@neiltonseguins) on CodePen.
Efeitos de fade-out
See the Pen Fade Out by Neilton Seguins (@neiltonseguins) on CodePen.
Você pode ter notado que em ambos os exemplos acima alteramos apenas a opacidade do elemento, manipulando onde ela vai ser máxima e mínima. Efeitos de opacidade são frequentemente usados em tooltips, modais e elementos de destaque.
Na animação de fade-in a opacidade é 0 no início da animação e no final ela é 1, isso causa o efeito de aparecer em um determinado espaço de tempo.
Enquanto que na animação de fade-out é o oposto, a opacidade é 1 no início da animação e 0 ao final dela, ou seja, estamos escondendo um elemento na tela.
E novamente, você pode brincar com as funções de tempo de animações, fazendo com que sua animação aconteça uma vez só, que ela seja rápida no início e lenta no final, ou vice-versa e muito mais.
Na documentação do W3Schools você encontra além da documentação, vários tutoriais mostrando as diferentes formas que você pode usar a regra @keyframes para criar animações incríveis para suas páginas. Você pode acessar esses tutoriais clicando aqui.
Criando efeitos impressionantes
Agora que você já entendeu como pode usar hover, transition e keyframes para criar efeitos visuais interessantes na sua página, podemos partir para um próximo nível de animações que são aquelas que deixam a sua página mais dinâmica e atrativa. Vamos começar com o efeito Parallax.
Parallax
A animação conhecida como parallax é um efeito de profundidade à medida que o usuário rola a página. Elementos em diferentes camadas movem-se em velocidades diferentes dando a sensação de profundidade.
Você pode usar este efeito para criar cenários que se movem, dando a sensação de movimento em seções de sua página. Exemplo:
See the Pen Parallax by Neilton Seguins (@neiltonseguins) on CodePen.
Outra maneira de usar este efeito parallax é fixando uma imagem de fundo e fazendo que ao rolar a página esta imagem se mantenha fixa na página inteira, enquanto que outros elementos rolam com a barra de rolagem.
Se quiser testar um outro exemplo do efeito parallax clique aqui.
Loader
Animações de carregamento mantêm o usuário engajado enquanto o conteúdo está sendo carregado. Elas são comuns em spinners, barras de progresso e placeholders.
Você pode conferir um exemplo de Loader logo abaixo:
See the Pen Loader by Neilton Seguins (@neiltonseguins) on CodePen.
CSS Motion Path
O CSS Motion Path permite que um elemento siga uma trajetória específica em vez de se mover em linhas retas. Isso é útil para criar animações mais complexas e naturais.
Abaixo tem um exemplo de como animar um círculo seguindo uma trajetória curvilínea.
See the Pen Motion Path by Neilton Seguins (@neiltonseguins) on CodePen.
Nessa animação, a trajetória do elemento que queremos animar é definida pela propriedade offset-path que cria um caminho para que o elemento a ser animado possa seguir.
Se quiser conhecer melhor o offset-path recomendo acessar a documentação interativa do W3Schools com tutoriais e exemplos bem legais de como você pode usar essa propriedade para criar animações incríveis para seus projetos.
Scroll-Driven Animations
As animações dirigidas por rolagem (Scroll-Driven Animations) permitem que a progressão de uma animação seja controlada pela rolagem da página. Isso pode ser usado para criar efeitos dinâmicos que dependem da posição de rolagem do usuário.
Como este é um recurso muito novo dos navegadores e sem suporte total para todos eles, vou deixar apenas uma playlist do Chrome for Developers no youtube que te ensina tudo o que você deve saber sobre animações dirigidas por rolagem.
E caso você prefira ter uma visão geral antes do que se trata, vou deixar o link da documentação do MDN onde fala um pouco sobre essa novidade na forma que criamos animações com CSS.
Conclusão
Vimos como as animações CSS podem transformar uma página web. Com apenas algumas linhas de código, é possível criar efeitos que melhoram a experiência do usuário e tornam a navegação mais intuitiva e agradável.
Agora, é a sua vez! Pegue esses exemplos, experimente e crie suas próprias animações para levar seu site ao próximo nível.
Tá afim de mergulhar de cabeça no CSS e aprender tudo sobre Grid, Flexbox, trabalhar com bibliotecas como o Tailwind CSS e Sass?
Então faça a Formação CSS: aprofunde em estilos e fique por dentro dos melhores conteúdos.
Ah, e sabia que dá para criar animações incríveis também com o JavaScript? Um passo importante para conseguir esse feito é dominar o JavaScript no Front-end. E para te ajudar com isso vou recomendar nossa Formação Desenvolva aplicações Web com JavaScript.
Bons estudos e até a próxima!!