Animações em CSS: o que são, tipos, exemplos e como usar animações com CSS

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 `@keyframes` que define a animação. Cada `@keyframes` conté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