Animação em CSS: como usar Transition, Animation e efeitos prontos
9 minutos de leitura
Hoje 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.
O que é Animate.css? Use animações CSS prontas em seus projetos
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.
Transition em CSS: como criar animações com transições
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.
Como usar transition animation CSS: exemplos práticos"
transition: 1s;
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).
transition: transform 1s, opacity 0.3s;
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.
transition-delay
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.
Animation CSS: como criar animações automáticas e avançadas
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 usar animações CSS prontas com Animate.css
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:
- Você pode baixar o arquivo CSS diretamente do site oficial do Animate.css.
- Também pode incluir diretamente de um CDN no seu HTML.
1. Adicione classes de animação:
- O Animate.css oferece diversas classes de animação que você pode adicionar aos seus elementos HTML para aplicar efeitos específicos.
- Para usar o Animate.css, você precisa adicionar a classe base
animate__animatedjunto com a classe de efeito desejada, por exemplo:animate__animated animate__bouncepara aplicar uma animação de salto a um elemento.
Exemplos de animações em CSS para usar em sites
Aqui estão algumas dicas de animações comuns em sites:
Bounce
.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(-15px);
}
}FadeIn
.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}Como monitorar o fim de animações CSS e transitions usando JavaScript
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:
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event
Dicas para otimizar a performance de animação em CSS
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!
Bibliotecas populares para animação em CSS e alternativas
Animate.css:
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.
Tweenmax - Greensock:
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.
Lottie do Airbnb:
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!
