Ir al contenido
charmotion
Empieza ahora

Lottie vs SVG y animación CSS: cuándo gana cada uno

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía comparativa: Lottie vs SVG y animación CSS: cuándo conviene cada uno

Usa transiciones y keyframes de CSS para el movimiento de la interfaz, como hovers, fundidos y spinners; no añaden ninguna biblioteca. Usa SVG animado para íconos y logos que puedas describir con unos pocos trazados. Usa Lottie cuando un diseñador haya creado una ilustración compleja en After Effects o Lottie Creator que sería poco práctico programar a mano.

Puntos clave

  • CSS y la Web Animations API no suponen ninguna descarga adicional y cubren la mayor parte del movimiento de la interfaz.
  • El SVG inline animado con CSS o SMIL es ideal para íconos, dibujos lineales y apariciones de logos.
  • Lottie compensa el peso de su reproductor (unos 46 a 76 KB con gzip en el caso de lottie-web) cuando el arte viene de un motion designer.
  • Todas las opciones necesitan una alternativa para movimiento reducido; solo CSS la consigue con una simple media query.

¿Cómo se comparan CSS, SVG y Lottie?

Estas opciones son capas, no rivales. Cada una añade capacidad y costo sobre la anterior.

EnfoqueDescarga añadidaSe crea enLímite de complejidadIdeal para
Transiciones y keyframes de CSSNingunoCódigoPropiedades de elementos existentesHover, foco, fundidos, spinners
Web Animations APINingunoJavaScriptIgual que CSS, con control de reproducciónMovimiento de UI secuenciado o basado en estados
SVG animado (CSS o SMIL)Nada más allá del SVGCódigo o un editor vectorialUnos pocos trazadosÍconos, dibujos lineales, apariciones de logos
Lottielottie-web ~46 a 76 KB con gzip; dotlottie-web ~433 KB de WASM (brotli)After Effects + Bodymovin, Lottie CreatorIlustración completa de motion designIlustraciones e íconos hechos por diseñadores
Rive222 a 648 KB de WASM con brotli (cifras de Rive)Editor de RivePersonajes riggeados con máquinas de estadosPersonajes y controles interactivos

Charmotion midió el peso de los reproductores lottie-web y dotlottie-web a partir de los paquetes de npm el 12 de octubre de 2026; los de Rive provienen de su tabla publicada de tamaños de runtime. Elige la fila más baja que pueda expresar tu animación.

¿Cuándo basta con una transición CSS?

Siempre que la animación cambie una propiedad de un elemento que ya existe: un botón que se eleva con el hover, un panel que aparece con un fundido, un brillo de skeleton, un spinner que gira. Las transiciones CSS animan entre dos estados; las animaciones con @keyframes ejecutan secuencias de varios pasos y pueden ir en 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; }

La guía de rendimiento de web.dev recomienda animar transform y opacity siempre que sea posible, porque los navegadores pueden procesarlas sin recalcular el layout ni volver a pintar. Animar width, top o box-shadow funciona, pero cuesta más por fotograma.

CSS deja de ser suficiente cuando el movimiento es el propio arte. Un personaje que saluda, una explosión de confeti con decenas de piezas o una escena ilustrada de onboarding requerirían cientos de keyframes ajustados a mano. Ese es el punto en el que una herramienta de diseño y un formato de archivo empiezan a compensar.

¿Cuándo supera el SVG animado a Lottie?

Cuando la animación consiste en unos pocos trazados que puedes nombrar. Los elementos SVG inline se pueden estilizar y animar con CSS como cualquier otro elemento, lo que cubre los efectos clásicos: dibujar una línea animando stroke-dashoffset, transformar un ícono entre dos estados o hacer latir el símbolo de un logo.

<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; } }

SVG también tiene sus propios elementos declarativos de animación, <animate> y <animateTransform> de SMIL, que MDN documenta y que funcionan incluso cuando el SVG se carga como imagen sin acceso a CSS.

El SVG animado gana en peso y control: no hay reproductor, el marcado se puede buscar y estilizar, y hereda tus tokens de color. Pierde en la creación. Programar a mano más de unas pocas piezas en movimiento es lento, y la mayoría de los editores vectoriales no exportan animación. Lottie es, en la práctica, una forma de sacar de una herramienta de diseño una animación compleja al estilo SVG.

¿Y la Web Animations API?

La Web Animations API (WAAPI) es la parte en JavaScript del mismo motor que ejecuta las animaciones CSS. Element.animate(keyframes, options) inicia una animación y devuelve un objeto que puedes reproducir, pausar, invertir o posicionar, con una promesa finished para encadenar secuencias.

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

Recurre a ella cuando CSS necesite lógica: una animación que empieza después de una petición de red, que encadena varios pasos o que responde a valores calculados en un script. No añade ninguna descarga.

En React, bibliotecas como Motion (importada desde "motion/react") envuelven este tipo de control en componentes, con animaciones de salida y de layout que resultan incómodas en CSS puro. Animan tus elementos existentes, lo que las mantiene en la misma familia que CSS y no que Lottie. Rive vs Motion explica dónde termina una biblioteca así y dónde empieza un archivo de animación.

¿Cuándo compensa el runtime de Lottie?

Cuando la animación se diseñó, no se programó. Lottie existe para que los motion designers creen en After Effects, exporten con Bodymovin y entreguen a los ingenieros un archivo que se reproduce igual en web, iOS, Android, React Native y Windows. Lottie Creator, de LottieFiles, ofrece una alternativa en el navegador que además crea máquinas de estados dentro de archivos dotLottie.

Lottie tiene sentido cuando:

  • el arte tiene muchas formas, máscaras y keyframes con easing que serían poco prácticos en CSS;
  • la misma animación debe publicarse en varias plataformas, algo que CSS y SVG no pueden hacer de forma nativa;
  • los diseñadores iteran sobre los tiempos y prefieres cambiar un archivo en lugar de editar código;
  • ya incluyes un reproductor de Lottie, así que cada animación nueva solo cuesta su archivo.

El costo es el reproductor. En la web, lottie-web pesa unos 76 KB con gzip (46 KB en la versión light), y el más reciente dotlottie-web carga un motor WebAssembly de unos 433 KB con brotli, según la medición que hizo Charmotion de los paquetes de npm. Carga cualquiera de los dos solo en las páginas que muestran una animación. lottie-web puede renderizar en SVG, canvas o HTML, así que puedes elegir entre nitidez y velocidad en cada animación.

¿Cómo se aplica la configuración de movimiento reducido en cada caso?

La media feature prefers-reduced-motion indica cuándo una persona ha pedido a su sistema operativo que minimice el movimiento. MDN la considera ampliamente disponible desde enero de 2020. Cada enfoque la gestiona de forma distinta:

  • CSS y SVG con CSS: una sola media query desactiva las animaciones o las sustituye por un fundido.
  • WAAPI y bibliotecas de JavaScript: comprueba matchMedia("(prefers-reduced-motion: reduce)") antes de empezar y escucha los cambios. MotionConfig reducedMotion="user" de Motion lo hace por ti.
  • SMIL: la media query no puede pausarlo directamente; oculta el SVG animado y muestra uno estático en su lugar.
  • Lottie: en la web, comprueba la preferencia y llama a goToAndStop en un fotograma significativo en lugar de reproducir. lottie-ios añadió compatibilidad con movimiento reducido en la versión 4.3.0.
@media (prefers-reduced-motion: reduce) {
  .card, .spinner, .check path { animation: none; transition: none; }
}

Deja siempre una versión estática que siga comunicando el estado. Animación accesible y movimiento reducido cubre la parte de WCAG.

¿Dónde encaja Rive?

Rive está un paso más allá de Lottie en el eje de complejidad. También es un formato de recursos diseñados, creado en el editor de Rive y reproducido por runtimes de código abierto, pero su archivo incluye una máquina de estados (state machine) que tu código controla en tiempo de ejecución. Eso encaja con un personaje o un control con muchos estados, como una mascota de marca que está en reposo, espera, celebra y se disculpa, todo en un solo archivo.

Tabla de decisión: APIs integradas para el feedback de la interfaz, efectos de íconos para íconos, una máquina de estados de Rive para personajes y video para clips de marketing
Elige el método de animación según la tarea.

No sustituye a CSS. Usar un runtime WebAssembly para un efecto de hover sería un desperdicio; Rive indica que sus paquetes web pesan de 222 a 648 KB comprimidos con brotli, según el renderizador. El reparto sensato es CSS para el movimiento de la interfaz, SVG para los íconos y un formato de archivo para todo lo que haya dibujado un ilustrador. Para decidir solo entre Lottie y Rive, consulta Rive vs Lottie.

Si lo que te falta es una versión animada de un personaje, una mascota de marca o un logo que ya tienes, Charmotion la genera: 17 animaciones en un solo .riv con un número de mood, triggers y un view model de Data Binding, además de MP4, GIF, WebM y MOV con fondo transparente, y código para web, React y SwiftUI. Genera Rive y no Lottie, así que complementa CSS y SVG en lugar de reemplazar un flujo de trabajo con Lottie.

¿Deberías elegir CSS, SVG o Lottie?

Elige CSS o la Web Animations API si:

  • animas elementos de interfaz que ya existen: botones, tarjetas, menús, toasts, spinners;
  • no quieres sumar nada a la descarga y quieres control total desde el código;
  • el movimiento reducido debería resolverse con una sola media query.

Elige SVG animado si:

  • la animación es un ícono, un dibujo de líneas o un isotipo con unos pocos trazados en movimiento;
  • debe heredar los colores de tu tema y verse nítida en cualquier tamaño;
  • un desarrollador puede escribir o ajustar el movimiento a mano sin demasiado esfuerzo.

Elige Lottie si:

  • un motion designer creó la animación en After Effects o Lottie Creator;
  • tiene demasiadas formas y keyframes para programarla a mano;
  • el mismo archivo debe reproducirse en la web y en apps nativas.

Y elige Rive cuando la pieza ilustrada necesita muchos estados entre los que tu app va cambiando. La mayoría de los sitios terminan usando dos o tres de estas opciones a la vez.

Preguntas frecuentes

¿Lottie es más rápido que la animación CSS?

No. Las animaciones CSS de transform y opacity se ejecutan en el propio motor de animación del navegador, sin ninguna biblioteca que descargar. Lottie agrega un reproductor y vuelve a dibujar las formas vectoriales en cada fotograma. La ventaja de Lottie es la expresividad para arte diseñado, no la velocidad. Usa CSS siempre que pueda expresar el movimiento.

¿Puedo exportar una animación de After Effects como SVG animado?

No directamente como un SVG animado autónomo. La vía habitual es Bodymovin, que exporta JSON de Lottie, y luego lottie-web puede renderizarlo como SVG en el navegador. El movimiento sigue dependiendo del reproductor de Lottie, en lugar de vivir en el marcado SVG como ocurriría con una animación CSS o SMIL.

¿SMIL está obsoleto?

No. Los elementos de animación SMIL, como animate y animateTransform, siguen documentados en MDN y funcionan en los navegadores actuales. Aun así, muchos desarrolladores prefieren CSS para animar SVG porque comparte herramientas con el resto del sitio y respeta prefers-reduced-motion con una simple media query.

¿Los íconos deberían usar Lottie o SVG?

Usa SVG en línea con CSS para estados simples de íconos, como una marca de verificación que se dibuja o un menú que se transforma en un botón de cerrar. Usa Lottie cuando un diseñador haya creado animaciones de íconos más elaboradas, sobre todo un set completo, y ya cargues el reproductor para otras animaciones en las mismas páginas.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas