8 minutos de leitura
Autor(a)
Vivo no 220v, sempre atrás de um filme/rolê novo e codando desafios aleatórios em JavaScript. Adoro fazer sites e falar/dar aulas sobre isso no @nubank, meu canal no YouTube DevSoutinho e na @alura
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Como ancorar elementos com HTML5
Ler mais
Mockando APIs REST com json-server
Ler mais
Começar a programar é com JavaScript
Ler maisHoje em dia, a animação em CSS tornou-se um recurso fundamental para criar sites modernos, dinâmicos e interativos. Animações em CSS vão muito além de simples detalhes visuais, sendo usadas inclusive como marca registrada por grandes empresas, como o próprio Google.
Neste artigo, você vai aprender o que é animação CSS, além de conhecer exemplos práticos de animações CSS prontas para usar e explorar as possibilidades do transform CSS animation.
Animate.css (às vezes chamado de animation css ou css animate) é uma biblioteca pré-desenvolvida que facilita a adição de efeitos de animação em elementos HTML nas páginas web.
A biblioteca dispõe de várias classes de animação, cada uma correspondendo a um efeito visual específico. Ao incluir essas classes aos elementos HTML, é possível criar transições suaves e atraentes sem a necessidade de escrever código JavaScript personalizado.
Se você busca entender como as animações CSS funcionam com a propriedade transition, saiba que transições são ótimas para criar efeitos visuais suaves e dinâmicos em interações comuns de sites.
Praticamente qualquer elemento na web pode ser animado, desde formulários durante transições de etapas, produtos sendo adicionados ao carrinho até o aparecimento de partes da página conforme o usuário rola a tela.
Na prática, boa parte dessas animações acontece após o usuário ou usuária executar uma ação.
Com isso em mente, vamos explorar a propriedade `transition` que se utilizada junto com os pseudo seletores `:hover` e `:focus` do CSS, é possível obter o seguinte resultado:
See the Pen Transition: Exemplo 1 by Mario Souto (@omariosouto) on CodePen.
Na prática, o transition pode ser aplicado para todos os valores que mudam entre os estilos padrões de um elemento e alguma variação aplicada, seja via uma ação de pseudo seletor (:hover e :focus) ou algum atributo, ou classe adicionada em uma tag na qual exista um seletor CSS aplicando alguma variação de estilo.
Somente valores quantificáveis podem ser animados com CSS, como opacity, transform, width ou height. Por exemplo, não é possível animar display de none para block, ou transformar a posição e escala de elementos com transform CSS animation.
Animações são, essencialmente, transições visíveis entre dois estados de um elemento. Alterar o background é apenas uma das opções disponíveis.
Também é possível animar propriedades como largura, altura, posição na página, e especialmente a propriedade `transform`, que funciona muito bem em conjunto com `transition`.
See the Pen Transition: Exemplo 2 by Mario Souto (@omariosouto) on CodePen.
Com `transform`, é possível aplicar diversos efeitos ao elemento, como alterar sua escala, posição ou distorcer com `skew()`, ampliando bastante as possibilidades de animação.
Aplica uma animação de 1 segundo para TODAS as propriedades de um seletor; é importante especificar quais propriedades vão ser animadas para evitar alguns gargalos de performance ou propriedades desnecessárias consumindo recursos em animações (que normalmente podem exigir bastante de computadores de usuários ou usuárias com hardwares menos potentes).
Aplica uma animação de 1 segundo para a propriedade transform, e uma de 0.3 segundos para o opacity. Todas as outras propriedades não são afetadas.
Também é possível especificar um delay para o transition com `transition-delay`, tal como específicar a duração e as características via propriedades separadas; no dia a dia acabamos utilizando a forma dos exemplos anteriores, mas deixo a dica para você olhar na MDN como trabalhar com essas variações.
Como vimos anteriormente, para animarmos algo com transition, dependemos de alguma ação do usuário ou usuária.
Observação importante: desde 2024-2026, browsers modernos passaram a suportar transições de propriedades display e content-visibility, permitindo animações de entrada/saída mesmo com display: none, o que antes não era possível.
See the Pen Animation: Exemplo 1 by Mario Souto (@omariosouto) on CodePen.
Repare que a animação está acontecendo sozinha de forma contínua, bem semelhante a alguns itens que existem para chamar a atenção, como setas indicando que algum ponto é clicável em alguns sites.Para isso ser possível estamos utilizando a propriedade `animation`.
Para criar animações automáticas, utilizamos a propriedade `animation` junto com `@keyframes`. Os keyframes permitem definir diferentes estados para as propriedades CSS do elemento ao longo do tempo.
Basicamente, iremos definir que dado um espaço de tempo entre o começo e o fim do mesmo, determinadas propriedades CSS serão aplicadas.
@keyframes go-back {
0% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}Para associar esses keyframes a um elemento HTML, utilizamos a propriedade `animation` indicando o nome da animação definida:
.quadrado {
animation: go-back 1s;
}See the Pen Animation: Exemplo 2 by Mario Souto (@omariosouto) on CodePen.
Porém, dessa forma a animação só acontece uma vez; caso tenhamos interesse em fazê-la acontecer de forma infinita, podemos adicionar a propriedade `animation-iteration-count: infinite;`.
Também é possível definir quantas vezes a animação será repetida, substituindo 'infinite' por um número. Para a animação ir e voltar entre o início e o fim, utilize a propriedade `animation-direction: alternate;`.
Como vimos, animate css é uma biblioteca de animações CSS pré-definidas que você pode usar facilmente em seus projetos web.
Confira abaixo, alguns passos básicos para começar a usar o animate.css em seu site:
1. Baixe o animate.css:
1. Adicione classes de animação:
Aqui estão algumas dicas de animações comuns em sites:
.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: cornflowerblue;
border: 2px solid #999;
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-);
}
}.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}Como vimos anteriormente, é possível ter vários níveis de controle nas animações com CSS, porém caso você queria ter um controle mais fino via JavaScript via um `elemento.addEventListener` é possível monitorar quanto uma transition ou um animation termina:
Esse post é mais introdutório, mas ainda assim, acho válido citar que trabalhar com performance em animações pode exigir um pouco de conhecimento de como o browser funciona, e um pouco de como o CSS funciona nos navegadores.
Existe uma propriedade que pode fazer milagres em alguns casos para melhorar performance de animações, mas que deve ser usado somente em último caso:
E se você quiser ter uma introdução mais profunda do tema de performance em animações, confira essa talk do Sérgio Lopes: Otimizando renderização e animações na Web.
Caso você encontre alguma animação que realmente esteja prejudicando a experiência de usuários em devices menos potentes, você pode desabilitá-la utilizando o @media (prefers-reduced-motion: reduce). Importante: desde a versão 3.7.0, o Animate.css já suporta automaticamente prefers-reduced-motion, desabilitando animações para usuários com essa preferência ativa no sistema operacional.
Essas recomendações são fundamentais principalmente em animações CSS complexas, onde desempenho e acessibilidade devem ser considerados para não prejudicar a experiência do usuário.
Para aprender ainda mais, confira nossa Carreira Desenvolvimento Front-end React!
Essa provavelmente foi a lib que mais me ajudou na época de agência. Além disso, existem versões da biblioteca Animate.css adaptadas para frameworks modernos, permitindo integrar animações de forma rápida ou estudar seu código-fonte para aprender como determinados efeitos são implementados, como o bounceIn.
Caso você queira fazer algo que possua um controle mais fino de o que é animado em cada tempo ou de acordo com X alteração do usuário, ou usuária, a melhor alternativa é correr para uma lib que te ajude a preparar essas “cenas”. O Tweenmax é uma ótima pedida, só deixo um ponto de observação, pois ela possui algumas restrições de uso gratuito.
Essa é a lib do momento, aquela mesma animação do logo do Google, que citei no começo do vídeo. Você pode aprender a fazer nesse alura mais, utilizar o plugin para After Effects e exportar para utilizar na web, mas isso podemos abordar em outro artigo.
Por hoje é isso. Em breve, traremos mais dicas sobre CSS e animações.
Acompanhe também outros artigos sobre desenvolvimento web em https://mariosouto.com!
Para se aprofundar em animação em CSS, transition animation CSS e animation CSS, veja nossos cursos e formações completas de Front-End, HTML e CSS na Alura. Você vai encontrar aulas práticas, projetos reais e dezenas de exemplos de animações CSS prontas para usar em seus projetos
Também preparamos uma jornada completa, estruturada com desafios reais, conteúdos práticos e tudo que o mercado espera de uma pessoa desenvolvedora Front-end, na nossa Carreira Desenvolvimento Front-end React!
Avalie este artigo
