Animações em CSS: o que são, tipos, exemplos e como usar animações com CSS | Alura Cursos Online
Animações em CSS: o que são, tipos, exemplos e como usar animações com CSS
10 min10 minutos de leitura
10 min10 minutos de leitura
Autor(a)
Maria Isabelle Silveira
Graduada em Design pela Universidade Federal do Maranhão, com certificação em Designing High Impact Solutions pelo MITdesignX. Desde 2020, atuo na criação de elementos gráficos e, a partir de 2022, iniciei minha trajetória na área de UX/UI Design. Com mais de 2 anos de experiência, dediquei-me na construção de produtos digitais nos segmentos de educação, saúde e beleza, além da construção de produtos SaaS, dashboards e soluções para os mercados B2B e B2C.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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
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;`.
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.
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:
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.
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:
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.
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:
