Lottie vs SVG e animação CSS: quando cada um vence

Como CSS, SVG e Lottie se comparam?

Essas opções são camadas, não concorrentes. Cada uma adiciona recursos e custo em cima da anterior.

Os tamanhos dos players lottie-web e dotlottie-web foram medidos pelo Charmotion a partir dos pacotes npm em 12/10/2026; os do Rive vêm da tabela de tamanhos de runtime publicada por ele. Escolha a linha mais baixa que consiga expressar a sua animação.

Quando uma transition em CSS é suficiente?

Sempre que a animação muda uma propriedade de um elemento que já existe: um botão que sobe no hover, um painel que aparece com fade, um brilho de skeleton, um spinner girando. Transitions em CSS animam entre dois estados; animações com @keyframes executam sequências de várias etapas e podem rodar em loop.

.card { transition: transform 200ms ease-out, opacity 200ms ease-out; }
.card:hover { transform: translateY(-4px); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }

A orientação de performance do web.dev é animar transform e opacity sempre que possível, porque os navegadores conseguem processá-los sem recalcular o layout nem repintar. Animar width, top ou box-shadow funciona, mas custa mais por frame.

O CSS deixa de ser suficiente quando o movimento é a própria arte. Um personagem que acena, uma explosão de confete com dezenas de peças ou uma cena ilustrada de onboarding exigiriam centenas de keyframes ajustados à mão. É nesse ponto que uma ferramenta de design e um formato de arquivo começam a compensar.

Quando o SVG animado é melhor que o Lottie?

Quando a animação tem poucos paths que você consegue nomear. Elementos SVG inline podem ser estilizados e animados com CSS como qualquer outro elemento, o que cobre os efeitos clássicos: desenhar uma linha animando stroke-dashoffset, transformar um ícone entre dois estados, fazer um símbolo de logo pulsar.

<svg viewBox="0 0 24 24" class="check">
  <path d="M4 12l5 5L20 6" pathLength="1" />
</svg>

.check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 400ms ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

O SVG também tem seus próprios elementos declarativos de animação, os <animate> e <animateTransform> do SMIL, documentados pelo MDN e que funcionam até quando o SVG é carregado como imagem, sem acesso ao CSS.

O SVG animado ganha em peso e controle: não há player, a marcação é pesquisável e estilizável, e herda seus tokens de cor. Ele perde na criação. Codificar à mão mais do que algumas partes móveis é lento, e a maioria dos editores vetoriais não exporta animação. Na prática, o Lottie é uma forma de tirar de uma ferramenta de design uma animação complexa no estilo SVG.

E a Web Animations API?

A Web Animations API (WAAPI) é o lado JavaScript do mesmo motor que executa as animações CSS. Element.animate(keyframes, options) inicia uma animação e retorna um objeto que você pode reproduzir, pausar, inverter ou posicionar em um ponto, com uma promise finished para encadear sequências.

const anim = document.querySelector(".badge").animate(
  [{ transform: "scale(1)" }, { transform: "scale(1.15)" }, { transform: "scale(1)" }],
  { duration: 300, easing: "ease-out" }
);
await anim.finished;

Use-a quando o CSS precisar de lógica: uma animação que começa depois de uma requisição de rede, encadeia várias etapas ou responde a valores calculados em script. Ela não adiciona nenhum download.

No React, bibliotecas como a Motion (importada de "motion/react") encapsulam esse tipo de controle em componentes, com animações de saída e de layout que são complicadas em CSS puro. Elas animam seus elementos existentes, o que as coloca na mesma família do CSS, e não do Lottie. Rive vs Motion mostra onde termina uma biblioteca assim e começa um arquivo de animação.

Quando o Lottie compensa o runtime?

Quando a animação foi desenhada, não codificada. O Lottie existe para que motion designers criem no After Effects, exportem com o Bodymovin e entreguem aos engenheiros um arquivo que roda igual na web, no iOS, no Android, no React Native e no Windows. O Lottie Creator, da LottieFiles, oferece uma alternativa no navegador que também cria state machines dentro de arquivos dotLottie.

O Lottie faz sentido quando:

• a arte tem muitas formas, máscaras e keyframes com easing que seriam inviáveis em CSS;
• a mesma animação precisa ir para várias plataformas, algo que CSS e SVG não fazem nativamente;
• os designers ajustam o timing com frequência e você prefere trocar um arquivo a editar código;
• você já entrega um player de Lottie, então cada nova animação custa só o próprio arquivo.

O custo é o player. Na web, o lottie-web tem cerca de 76 KB com gzip (46 KB na versão light), e o mais recente dotlottie-web carrega um motor WebAssembly de cerca de 433 KB com brotli, segundo a medição do Charmotion nos pacotes npm. Carregue qualquer um deles só nas páginas que exibem uma animação. O lottie-web pode renderizar em SVG, canvas ou HTML, então você pode trocar nitidez por velocidade em cada animação.

Como as configurações de movimento reduzido se aplicam a cada um?

O recurso de mídia prefers-reduced-motion indica quando a pessoa pediu ao sistema operacional para minimizar o movimento. O MDN o lista como amplamente disponível desde janeiro de 2020. Cada abordagem lida com isso de um jeito:

• CSS e SVG com CSS: uma única media query desliga as animações ou as troca por um fade.
• WAAPI e bibliotecas JavaScript: verifique matchMedia("(prefers-reduced-motion: reduce)") antes de iniciar e escute as mudanças. O MotionConfig reducedMotion="user" da Motion faz isso por você.
• SMIL: a media query não consegue pausá-lo diretamente; oculte o SVG animado e exiba um estático no lugar.
• Lottie: na web, verifique a preferência e chame goToAndStop em um frame significativo em vez de reproduzir. O lottie-ios adicionou suporte a movimento reduzido na versão 4.3.0.

@media (prefers-reduced-motion: reduce) {
  .card, .spinner, .check path { animation: none; transition: none; }
}

Sempre deixe uma versão estática que ainda comunique o estado. Animação acessível e movimento reduzido aborda o lado das WCAG.

Onde o Rive entra nisso?

O Rive fica um passo além do Lottie no eixo de complexidade. Também é um formato de asset desenhado, criado no editor do Rive e reproduzido por runtimes de código aberto, mas o arquivo carrega uma state machine (máquina de estados) que o seu código controla em tempo de execução. Isso combina com um personagem ou controle com muitos estados, como um mascote que fica em idle, espera, comemora e pede desculpas, tudo em um único arquivo.

Ele não substitui o CSS. Usar um runtime WebAssembly para um efeito de hover seria desperdício; o Rive informa que seus pacotes web têm de 222 a 648 KB com compressão brotli, dependendo do renderizador. A divisão sensata é CSS para o movimento da interface, SVG para ícones e um formato de arquivo para tudo o que um ilustrador desenhou. Para decidir só entre Lottie e Rive, veja Rive vs Lottie.

Se o que falta é uma versão animada de um personagem, mascote ou logo que você já tem, o Charmotion gera uma: 17 animações em um único .riv com um número de mood, triggers e um view model com Data Binding, além de MP4, GIF, WebM e MOV com fundo transparente, e código para web, React e SwiftUI. Ele gera Rive, não Lottie, então complementa o CSS e o SVG em vez de substituir um pipeline de Lottie.

Você deve escolher CSS, SVG ou Lottie?

Escolha CSS ou a Web Animations API se:

• você está animando elementos de interface que já existem: botões, cards, menus, toasts, spinners;
• você quer zero download adicional e controle total no código;
• o movimento reduzido deve se resolver com uma única media query.

Escolha SVG animado se:

• a animação é um ícone, um desenho de linhas ou o símbolo de um logo com poucos paths em movimento;
• ela deve herdar as cores do seu tema e ficar nítida em qualquer tamanho;
• um desenvolvedor consegue escrever ou ajustar o movimento à mão sem grande esforço.

Escolha Lottie se:

• um motion designer criou a animação no After Effects ou no Lottie Creator;
• ela tem formas e keyframes demais para codificar à mão;
• o mesmo arquivo precisa tocar na web e em apps nativos.

E escolha Rive quando a peça ilustrada precisa de vários estados entre os quais o seu app alterna. A maioria dos sites acaba usando duas ou três dessas opções juntas.

Perguntas frequentes

Lottie é mais rápido que animação CSS?

Não. Animações CSS de transform e opacity rodam no próprio mecanismo de animação do navegador, sem biblioteca para baixar. O Lottie adiciona um player e redesenha as formas vetoriais a cada frame. A vantagem do Lottie é a expressividade para artes criadas por designers, não a velocidade. Use CSS sempre que ele conseguir expressar o movimento.

Posso exportar uma animação do After Effects como SVG animado?

Não diretamente como um SVG animado independente. O caminho mais comum é o Bodymovin, que exporta Lottie JSON, e o lottie-web pode então renderizá-lo como SVG no navegador. O movimento continua dependendo do player do Lottie, em vez de ficar no próprio markup do SVG, como aconteceria com animação CSS ou SMIL.

O SMIL está obsoleto?

Não. Elementos de animação SMIL como animate e animateTransform continuam documentados no MDN e funcionam nos navegadores atuais. Muitos desenvolvedores ainda preferem CSS para animar SVG porque ele usa as mesmas ferramentas do resto do site e respeita prefers-reduced-motion com uma media query simples.

Ícones devem usar Lottie ou SVG?

Use SVG inline com CSS para estados simples de ícone, como um check que se desenha ou um menu que se transforma em botão de fechar. Use Lottie quando um designer produziu animações de ícone mais ricas, principalmente um conjunto inteiro, e você já carrega o player para outras animações nas mesmas páginas.

Respostas rápidas deste guia

• Devo usar Lottie ou animação CSS?

Fontes

• Using CSS animations, MDN Web Docs
• How to create high-performance CSS animations, web.dev
• Using the Web Animations API, MDN Web Docs
• SVG animation with SMIL, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• lottie-web, Airbnb on GitHub
• lottie-web package, npm
• Runtime sizes, Rive