Animacoes CSS: Guia Pratico com Exemplos

Transition vs. Animation

CSS oferece duas formas de movimento: transitions e animations. Transitions sao reacoes a mudancas de estado — quando o usuario passa o mouse sobre um botao, a cor muda suavemente. Animations sao sequencias autonomas que rodam independente de interacao.

Use transition para hover effects e respostas a cliques. Use animation com @keyframes para loading spinners, pulsos de notificacao e animacoes de entrada.

Criando Animacoes com Keyframes

A regra @keyframes define os estados da animacao em pontos percentuais do tempo. O navegador interpola suavemente entre esses pontos. As propriedades mais animadas sao transform, opacity e background-color — otimizadas pelo GPU e rodam a 60fps.

Evite animar width, height, margin e padding — causam relayout e animacoes travadas. Use transform: scale() em vez de animar width/height.

Funcoes de Timing

Linear e velocidade constante. Ease comeca devagar, acelera e desacelera — geralmente a melhor escolha. Ease-in para elementos saindo da tela, ease-out para elementos entrando. Para controle fino, use cubic-bezier() com ferramentas visuais.

Performance de Animacoes

Animacoes CSS bem feitas rodam na thread de composicao, separada da thread principal. Anime apenas transform e opacity para garantir fluidez. Use will-change com moderacao — aplicar em muitos elementos consome memoria.

Gerador de Animacoes CSS

Nosso Gerador de Animacoes CSS permite criar animacoes visualmente com controles de timing e duracao. Ajuste, visualize e copie o codigo — gratis e sem cadastro.