Animações em CSS: o que são, tipos, exemplos e como usar animações com CSS
11 minutos de leitura
Neste artigo, você aprenderá o que são animações em CSS, quais propriedades são fundamentais, como funcionam keyframes e transições, além de boas práticas para aplicá-las de forma acessível e moderna.
As animações em CSS são uma forma poderosa de adicionar movimento e interatividade aos elementos da sua página web.
Com CSS, é possível acessar diversas propriedades para criar animações detalhadas, sem a necessidade de JavaScript ou outras linguagens de programação.
Neste guia, você vai aprender diferentes formas de criar animações CSS, desde exemplos simples até dicas para utilizar recursos avançados.
O que é CSS?
CSS, sigla para Cascading Style Sheets (Folhas de Estilo em Cascata), é uma linguagem de estilos utilizada para definir a aparência e o layout de documentos escritos em HTML ou XML.
O CSS separa a estrutura do conteúdo da página (HTML) da apresentação visual, permitindo modificar a aparência de vários sites ao mesmo tempo a partir de um único arquivo de estilos.
Com CSS, é possível controlar a aparência dos elementos HTML, como cores, fontes, espaçamentos, layout, além de criar animações e transições. O CSS pode ser aplicado de três formas principais: interno, externo e inline.
O CSS interno é inserido no cabeçalho do HTML usando a tag <style>. Já o CSS externo fica em um arquivo .css separado, vinculado ao HTML pelo <link>. O CSS inline é diretamente atribuído aos elementos HTML através do atributo style.
Quais são os benefícios do CSS?
Entre os principais benefícios do CSS estão a separação entre conteúdo (HTML) e apresentação visual (CSS), facilitando a organização e a manutenção do código. O CSS também permite criar layouts responsivos, que se adaptam automaticamente a diferentes tamanhos de tela e dispositivos.
Essa flexibilidade é fundamental no cenário atual, onde o acesso à internet ocorre por diferentes dispositivos, como computadores, tablets e celulares.
O que são animações CSS e como funcionam?"
As animações em CSS tornam possível adicionar movimento e interatividade aos elementos das páginas, criando experiências visuais mais dinâmicas e envolventes para quem navega.
Propriedades de animação
As propriedades de animação do CSS possibilitam aplicar movimentos e interatividade aos elementos de maneira simples e sem precisar de JavaScript ou outras linguagens.
Essas propriedades são usadas para definir, controlar e manipular animações, que são sequências de estados visuais que podem ser aplicadas a um elemento HTML.
Principais propriedades para criar animação CSS
As principais propriedades de animação em CSS são:
- animation-name: Especifica o nome da regra
@keyframesque define a animação. Cada@keyframescontém os estilos que devem ser aplicados em diferentes momentos da animação. - animation-duration: Define o tempo total que a animação deve levar para completar um ciclo.
- animation-timing-function: Controla a velocidade da animação ao longo do tempo, permitindo aceleração, desaceleração ou variações na velocidade.
- animation-delay: Especifica o atraso antes que a animação comece.
- animation-iteration-count: Determina quantas vezes a animação deve repetir.
- animation-direction: Define se a animação deve ser reproduzida na direção normal, inversa, alternativa ou alternativa inversa.
- animation-fill-mode: Especifica os estilos que devem ser aplicados antes e depois da execução da animação.
- animation-play-state: Permite pausar ou retomar a animação.
- animation-timeline: Propriedade CSS que especifica a timeline usada para controlar o progresso de uma animação. Integrada às especificações oficiais do CSS, ela permite associar uma animação a diferentes tipos de timeline: a linha do tempo padrão baseada em tempo (DocumentTimeline), a scroll progress timeline (usando scroll() ou nomes personalizados) e a view progress timeline (usando view() ou nomes personalizados). Atualmente, a propriedade conta com amplo suporte cross-browser em sua versão Baseline, o que a torna totalmente pronta para uso em produção.
Como usar a propriedade animation para animações CSS
A propriedade “animation” é uma propriedade abreviada que permite definir todas as propriedades de animação em uma única declaração.
Ela é uma forma conveniente de aplicar várias propriedades de animação de uma só vez, sem a necessidade de especificar cada uma delas individualmente.
A ordem das propriedades é importante. O atalho segue a sequência: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode e animation-play-state.
Importante: animation-timeline é um valor reset-only no shorthand animation. Isso significa que ao usar o shorthand animation, qualquer valor de animation-timeline previamente declarado será resetado para auto. Portanto, ao criar scroll-driven animations, você deve declarar animation-timeline APÓS o shorthand animation para que tenha efeito
Exemplo de uso
CSS
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
.element {
animation: pulse 5s infinite;
}Neste exemplo, a animação “pulse” é aplicada ao elemento com a classe “element”, fazendo com que o “background-color” mude de “#001F3F” para “#FF4136” ao longo de 5 segundos, repetindo infinitamente.
Um ponto importante sobre compatibilidade com Firefox (2026): Para scroll-driven animations, o Firefox requer que animation-duration seja especificada (recomenda-se usar 1ms) mesmo que a duração não seja relevante para animações baseadas em scroll. Exemplo: animation-duration: 1ms;.
Sugestão: Consulte a documentação oficial do MDN Web Docs sobre animações CSS para um aprofundamento técnico ainda maior. Além disso, inspire-se em repositórios de animações CSS prontas do CodePen e otimize seu workflow.
O que são keyframes e como funcionam em animações com CSS?
Os keyframes são uma regra CSS que permite definir animações. Eles são usados para criar sequências de estilos que são aplicados a um elemento ao longo do tempo, permitindo que o elemento se mova, mude de cor, altere tamanho, e assim por diante, de maneira controlada.
Cada conjunto de keyframes é identificado por um nome e define os estilos que devem ser aplicados a um elemento em determinados pontos do tempo durante a animação.
Como Funcionam os keyframes
Você cria um keyframe com um nome específico e, em seguida, usa essa regra para definir a sequência de estilos que a animação deve seguir.
Cada keyframe pode conter múltiplos seletores, que são especificados em porcentagens ao longo da duração da animação.
Por exemplo, “0%” representa o início da animação e “100%” representa o final. Esses seletores de keyframe podem ser listados em qualquer ordem, pois o navegador os ordenará corretamente com base na porcentagem especificada.
Para aplicar uma animação definida com keyframes a um elemento, você usa a propriedade “animation-name” no CSS do elemento, referenciando o nome do keyframe definido. Isso associa a animação ao elemento, como é mostrado no exemplo abaixo.
CSS
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
.element {
animation: slidein 8s infinite;
}Neste exemplo, a animação “slidein” é definida para fazer um elemento deslizar da margem esquerda para a margem direita ao longo de 8 segundos, repetindo infinitamente.
A regra keyframe contém os estilos que devem ser aplicados em diferentes momentos da animação, e o elemento com a classe “element” é quem realiza a animação.
Vantagens dos Keyframes
As principais vantagens dos keyframes são:
- Flexibilidade: Os keyframes permitem criar animações complexas com múltiplas etapas, alterando várias propriedades ao longo do tempo.
- Controle: Você tem controle total sobre como a animação se desenrola, especificando exatamente quando e como cada estilo deve ser aplicado.
- Reutilização: Uma vez definida, uma animação keyframes pode ser reutilizada em vários elementos, facilitando a manutenção do código CSS.
Transições CSS: outro tipo de animação CSS
As transições CSS são uma maneira prática de adicionar efeitos de animação a elementos HTML sem a necessidade de JavaScript ou outra linguagem de programação.
Elas permitem que você crie uma experiência de usuário mais suave e interativa, especialmente em resposta a interações da pessoa usuária, como passar o mouse sobre um elemento ou focar em um campo de entrada.
Como Funcionam as Transições CSS
As transições CSS são aplicadas a propriedades CSS que podem ter valores diferentes. Quando um valor de uma propriedade CSS muda, a transição suaviza a mudança, em vez de aplicá-la instantaneamente.
Isso é especialmente útil para propriedades que podem ser animadas, como “opacity”, “background-color”, “width”, “height”, e “transform”.
Para criar uma transição, você precisa especificar:
- A propriedade CSS que deseja animar;
- A duração da transição;
- O timing-function (ou função de tempo), que controla a velocidade da transição.
Aqui está um exemplo básico de como aplicar uma transição a um elemento quando o mouse passa sobre ele:
.ELEMENT
background-color: #001F3F;
transition: background-color 0.5s ease;
}
.element:hover {
background-color: #dc6ebe;
}Neste exemplo, o elemento com a classe .element terá sua cor de fundo alterada de #001F3F para #dc6ebe ao longo de 0.5 segundos, usando a função de tempo ease, que suaviza a velocidade da transição.
Animações de transformação: utilizando transform em animações CSS
As animações de transformação em CSS são uma forma poderosa de adicionar movimento e interatividade aos elementos de uma página web.
Utilizando a propriedade transform, os desenvolvedores podem aplicar transformações 2D ou 3D aos elementos, como rotação, escala, movimento (translate), inclinação (skew), e até mesmo transformações 3D como rotação em torno de um eixo.
Essas transformações podem ser aplicadas de forma estática ou podem ser animadas para criar efeitos dinâmicos e atraentes.
Como Funcionam as Transformações CSS
A propriedade transform aceita uma ou mais funções de transformação que podem ser aplicadas ao elemento.
As funções são aplicadas na ordem em que aparecem, o que significa que a ordem das transformações pode afetar o resultado final.
Por exemplo, aplicar uma rotação seguida de uma escala gera um efeito distinto de aplicar a escala antes da rotação.
Exemplo de uso
CSS
div {
border: solid red;
width: 200px;
height: 24px;
padding: 24px;
}
div:hover {
transform: translate(30px, 20px) rotate(20deg);
transition: 1s ease-in-out
}Neste exemplo, o elemento <div> é movido 30 pixels para a direita e 20 pixels para baixo (translate(30px, 20px)) e então rotacionado 20 graus no sentido horário (rotate(20deg)). A ordem das transformações é crucial para o resultado final.
Considerações de Acessibilidade
Animações que envolvem escala, rotação, parallax scrolling, panning ou grandes movimentos podem ser problemáticas para usuários com distúrbios vestibulares, enxaquecas, ou sensibilidade a movimento. Segundo estudos de acessibilidade, essas animações podem desencadear desconforto físico e até náuseas.
É recomendável fornecer uma opção para desativar as animações ou usar a media feature “prefers-reduced-motion” para detectar a preferência do usuário por animações reduzidas.
Exemplo de implementação de prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
transition: none;
}
}Boa prática: Não remova TODAS as animações quando prefers-reduced-motion estiver ativo. Animações sutis e não-vestibulares (como transições de opacidade curtas < 200ms ou mudanças de cor) podem permanecer, pois auxiliam na usabilidade sem causar desconforto. Remova ou substitua: parallax scrolling, slide-ins grandes, zoom, carrosséis auto-play, spinners infinitos.
Para saber mais, recomendamos a leitura da documentação sobre transform e “prefers-reduced-motion".
Por que usar animações CSS em seus projetos: resumo e próximos passos
Ao explorar o guia de animações em CSS, fomos capazes de ver o quão versátil essa tecnologia pode ser para transformar a experiência do usuário em páginas web.
As animações deixaram de ser apenas um recurso visual para se tornarem essenciais na criação de sites interativos e envolventes, atendendo às expectativas de quem navega na web atualmente.
Para quem busca aprofundar seus conhecimentos em CSS e explorar as possibilidades que ele oferece, recomendamos algumas trilhas de desenvolvimento:
CSS: é o aprofundamento ideal para quem busca estudar estilos. Para quem deseja se desenvolver em UI Design recomendamos a Carreira UI Design onde você vai aprender a criar interfaces digitais funcionais, construir sistemas de design e colaborar com times de desenvolvimento.
Nos vemos na próxima!
• Revisão didática por: Cinthia Bregola
• Revisão técnica por: Lima
