CSS @keyframes fade

CSS @keyframes fade: anime opacity do jeito certo

Um fade é a animação CSS mais simples: a opacity vai de 0 a 1 (fade in) ou de 1 a 0 (fade out) ao longo de uma duração. Por trás dos panos, você declara uma regra @keyframes e amarra ao elemento via o shorthand animation. Opacity (junto com transform) é uma das duas únicas propriedades que o browser pode animar puramente no compositor — pula layout e paint, roda na GPU e mantém-se suave mesmo em dispositivos modestos.

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.element {
  animation: fadeIn 0.5s ease forwards;
}

Shorthand animation decodificado

O shorthand completo é animation: nome duração timing-function delay iteration-count direction fill-mode play-state. Os dois valores que mais confundem são fill-mode e timing-function:

• fill-mode — forwards mantém o estado final depois que a animação termina (essencial para fade-in), backwards aplica o estado inicial durante o delay, both faz as duas coisas, padrão é none (reverte para o CSS original — normalmente não é o que iniciantes querem).
• timing-function — ease é o padrão mas parece preguiçoso; ease-out costuma ser o melhor para fades (começa rápido, termina devagar). cubic-bezier(0.4, 0, 0.2, 1) é a curva "standard" do Material.
• iteration-count — infinite para pulsar, combinada com direction: alternate para respirar.

Variações: fade-in-up, crossfade, stagger

Adicionar transform: translateY(20px) no from cria o fadeInUp; translateX dá variantes para esquerda/direita. Crossfade anima dois elementos empilhados simultaneamente — um sumindo, outro aparecendo. Stagger aplica a mesma animação a uma lista de filhos com animation-delay crescente, produzindo uma revelação em cascata. A biblioteca Animate.css de Daniel Eden traz centenas de keyframes de fade prontos se você não quer escrever os próprios.

Performance e acessibilidade

Fique com opacity e transform — ambos são composited na GPU. Animar width, height, top ou left dispara layout a cada frame e derruba a performance. Dê uma dica ao browser com will-change: opacity, mas remova depois que a animação acaba (consome memória de GPU). Mais importante: respeite @media (prefers-reduced-motion: reduce) — usuários com distúrbios vestibulares setam essa flag no SO e seu CSS deve desativar ou encurtar a animação.

@media (prefers-reduced-motion: no-preference) {
  .element { animation: fadeIn 0.5s ease forwards; }
}

Alternativas modernas: WAAPI e View Transitions

A Web Animations API (WAAPI) é o equivalente em JavaScript — element.animate([{opacity:0},{opacity:1}], 500) — útil quando você precisa de controle preciso ou disparar animações via lógica. A View Transitions API (Chrome 111+, 2023) anima entre dois estados do DOM (ou duas páginas) com uma única linha, substituindo dezenas de keyframes manuais para transições típicas de página. Para fades disparados por scroll, combine IntersectionObserver com um toggle de classe CSS para a animação rodar só quando o elemento entra no viewport.

Perguntas frequentes

Animação CSS é mais rápida que JavaScript? Para opacity e transform, sim — rodam no compositor. Bibliotecas JS como GSAP são competitivas quando você anima propriedades não-composited ou precisa sincronizar muitos elementos.

Posso animar paths SVG? Não via CSS @keyframes sozinho para o atributo d. Use SMIL, o MorphSVGPlugin do GSAP ou Snap.svg. Opacity, transform e propriedades de stroke do SVG animam normalmente com CSS.

Como fazer loop infinito? Adicione animation-iteration-count: infinite. Combine com animation-direction: alternate para um pulso de ida e volta.

Por que meu elemento fica invisível depois da animação? O fill-mode padrão é none, que reverte ao CSS pré-animação (opacity 1 ou o que você setou). Adicione forwards para manter o estado final.