Elegir entre Framer Motion y animaciones CSS no debería convertirse en una batalla de herramientas. En realidad, la pregunta importante no es cuál es “mejor”, sino cuál resuelve mejor el tipo de animación que necesitas construir.
En proyectos React, es muy habitual caer en uno de estos dos extremos: usar CSS para absolutamente todo, incluso cuando la animación depende del estado de un componente, o instalar una librería como Framer Motion —actualmente conocida como Motion para React en su documentación moderna— para animaciones que podrían resolverse con unas pocas líneas de CSS.
Ambas opciones tienen sentido. Ambas pueden ser profesionales. Y ambas pueden generar malas experiencias si se usan sin criterio.
Por eso, en este artículo vamos a comparar Framer Motion vs CSS, revisar cuándo conviene usar animaciones CSS en React, cuándo tiene sentido apostar por Motion React, y cómo tomar mejores decisiones para que tus interfaces sean más fluidas, accesibles y mantenibles.
Qué son las animaciones CSS y qué aporta Framer Motion
Antes de entrar en comparaciones, conviene aclarar qué papel cumple cada enfoque. Aunque los dos sirven para animar elementos en pantalla, no trabajan exactamente al mismo nivel.
Animaciones CSS: movimiento desde la capa de estilos
Las animaciones CSS permiten crear transiciones, efectos de entrada, cambios de estado, loaders, microinteracciones y movimientos decorativos directamente desde la hoja de estilos.
Puedes trabajar con transition cuando quieres suavizar el cambio entre dos estados, por ejemplo al pasar el cursor sobre un botón. También puedes usar @keyframes y la propiedad animation cuando necesitas una secuencia más definida, repetitiva o autónoma.
CSS funciona especialmente bien cuando la animación:
- Depende de estados visuales simples como
:hover,:focus,:activeo una clase. - No necesita cálculos complejos.
- No depende demasiado del ciclo de vida de React.
- Puede describirse como una transformación visual directa.
- Debe mantenerse ligera y cercana al sistema de diseño.
Por ejemplo, un botón que cambia suavemente de color, una tarjeta que se eleva al hacer hover o un icono que gira al cargar una sección son casos perfectos para CSS.
Framer Motion o Motion React: movimiento desde la lógica del componente
Framer Motion, ahora presentado en su documentación moderna como Motion for React, es una librería de animación pensada para crear interfaces animadas en React de forma declarativa.
Su mayor ventaja aparece cuando el movimiento está muy relacionado con el estado del componente, el montaje y desmontaje de elementos, los cambios de layout, los gestos del usuario o la coordinación entre varias piezas de la interfaz.
Framer Motion brilla cuando necesitas animaciones como:
- Entrada y salida de modales.
- Animaciones al montar o desmontar componentes.
- Transiciones entre estados complejos.
- Animaciones de layout.
- Elementos que se arrastran.
- Gestos como hover, tap, drag o inView.
- Secuencias coordinadas entre componentes.
- Microinteracciones conectadas con el estado de React.
Aquí la animación ya no vive solo en la capa visual. Vive también en la lógica de la interfaz.
Una nota importante sobre el nombre
Aunque muchas personas siguen buscando “Framer Motion”, la documentación actual suele hablar de Motion o Motion for React. En la práctica, cuando alguien busca Framer Motion vs CSS, normalmente está comparando las animaciones CSS tradicionales con esta librería de animación para React.
A nivel SEO, tiene sentido mencionar ambos términos: Framer Motion, Motion React y librerías de animación React, porque reflejan cómo buscan realmente las personas este tema.
Framer Motion vs CSS: diferencias principales
La diferencia más importante entre ambos enfoques no es solo técnica. También es mental.
CSS responde muy bien a la pregunta: “¿Cómo cambia visualmente este elemento?”.
Framer Motion responde mejor a la pregunta: “¿Cómo se mueve este componente cuando cambia su estado, su presencia o su posición?”.
Comparativa rápida entre CSS y Framer Motion
| Criterio | Animaciones CSS | Framer Motion / Motion React |
|---|---|---|
| Mejor para | Transiciones simples, hover, keyframes, microinteracciones visuales | Animaciones ligadas al estado, montaje, salida, layout y gestos |
| Integración con React | Indirecta, mediante clases, estilos o estados aplicados | Directa, mediante props y componentes motion |
| Curva de aprendizaje | Baja si ya dominas CSS | Media, requiere entender su API |
| Peso en el bundle | No añade JavaScript extra | Añade dependencia al proyecto |
| Animaciones de salida | Más manuales en React | Mucho más cómodas con componentes específicos |
| Layout animations | Limitadas o manuales | Muy potentes y declarativas |
| Accesibilidad | Compatible con prefers-reduced-motion | Puede integrarse con hooks para reducir movimiento |
| Mantenimiento | Excelente para patrones simples | Mejor para animaciones complejas y reutilizables |
La clave está en no utilizar una librería cuando CSS ya resuelve el problema de manera limpia, pero tampoco forzar CSS cuando la animación depende claramente del comportamiento de React.
Cuándo usar animaciones CSS
Las animaciones CSS en React siguen siendo una opción muy sólida. De hecho, en muchos casos deberían ser la primera alternativa.
CSS es rápido de aplicar, no añade dependencias y encaja muy bien con sistemas de diseño, componentes reutilizables y estilos globales o modulares.
Usa CSS para estados visuales simples
Si la animación depende de un estado visual básico, CSS suele ser suficiente.
Por ejemplo:
.button {
transform: translateY(0);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
Este tipo de interacción no necesita Framer Motion. Añadir una librería para resolver un hover simple sería innecesario.
Usa CSS para microinteracciones de interfaz
Las microinteracciones pequeñas, como cambios de color, subrayados animados, estados activos, indicadores visuales o iconos que reaccionan al usuario, suelen funcionar muy bien con CSS.
Aquí hablamos de detalles como:
- Un enlace que muestra una línea inferior animada.
- Una tarjeta que aumenta ligeramente su escala.
- Un botón que cambia de fondo.
- Un icono que rota al abrir un acordeón.
- Un input que resalta al recibir foco.
Estas animaciones aportan sensación de calidad sin complicar el componente.
Usa CSS para loaders y animaciones repetitivas sencillas
Cuando necesitas una animación autónoma y repetitiva, como un spinner, un pulso o un pequeño indicador de carga, @keyframes suele ser suficiente.
.loader {
width: 32px;
height: 32px;
border: 3px solid #ddd;
border-top-color: #753a88;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
No hay estado complejo, no hay lógica de montaje, no hay interacción avanzada. CSS hace el trabajo de forma directa.
Usa CSS cuando el rendimiento y el peso importan mucho
Si estás creando una landing page, un blog, una página corporativa o una interfaz donde el movimiento es principalmente decorativo, CSS te ayuda a mantener el proyecto más ligero.
Esto no significa que Framer Motion sea “pesado” por definición. Significa que cada dependencia debe justificar su presencia. Si solo necesitas dos efectos de hover y una transición de opacidad, CSS será más razonable.
Consejo práctico
Prioriza animar propiedades como transform y opacity siempre que sea posible. Suelen ser más adecuadas para animaciones fluidas que propiedades que fuerzan recálculos de layout, como width, height, top, left o margin.
Cuándo usar Framer Motion o Motion React
Framer Motion tiene mucho sentido cuando CSS empieza a quedarse corto, no porque CSS sea débil, sino porque el problema pertenece más a la lógica de componentes que a la capa de estilos.
Usa Framer Motion para animaciones de entrada y salida
En React, animar la entrada de un componente suele ser fácil. El problema aparece al animar su salida.
Cuando un componente deja de renderizarse, React lo elimina del DOM. Eso complica aplicar una animación de salida con CSS puro, porque el elemento puede desaparecer antes de que la animación termine.
Ahí Framer Motion resulta muy útil.
Ejemplo conceptual:
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 16 }}
>
Contenido del modal
</motion.div>
)}
</AnimatePresence>
Este patrón es ideal para modales, menús móviles, tooltips, paneles laterales y mensajes temporales.
Usa Framer Motion para layout animations
Una de las razones más potentes para usar Motion React son las animaciones de layout.
Imagina una tarjeta que cambia de tamaño, una lista que reordena elementos, un panel que se expande o un componente que pasa de una columna a otra. Con CSS puedes resolver algunas partes, pero cuando el layout depende de React y cambia dinámicamente, el trabajo se vuelve más complejo.
Framer Motion permite animar ciertos cambios de layout de forma declarativa, reduciendo bastante la fricción.
Este tipo de animación es especialmente útil en:
- Dashboards.
- Filtros de productos.
- Galerías.
- Listas reordenables.
- Acordeones avanzados.
- Interfaces tipo kanban.
- Componentes que cambian de tamaño según el contenido.
Usa Framer Motion para gestos e interacción avanzada
CSS puede reaccionar a :hover, :focus o :active, pero cuando necesitas gestos más ricos, Framer Motion ofrece una experiencia mucho más completa.
Por ejemplo, puedes trabajar con:
- Hover.
- Tap.
- Drag.
- Pan.
- Focus.
- Animaciones al entrar en viewport.
- Respuestas visuales ligadas al gesto del usuario.
Esto es especialmente útil en interfaces donde el usuario no solo mira, sino que interactúa físicamente con los elementos: arrastra, pulsa, desplaza, abre, cierra, ordena o explora.
Usa Framer Motion para secuencias coordinadas
Cuando varias piezas deben animarse con una relación temporal entre ellas, CSS puede volverse difícil de mantener.
Por ejemplo, piensa en una pantalla donde:
- Aparece un fondo.
- Entra un título.
- Después se muestra un texto.
- Luego aparecen tres tarjetas en cascada.
- Finalmente se activa un CTA.
Puedes hacerlo con CSS, sí. Pero si esta secuencia depende de estados, props o datos dinámicos, Framer Motion suele ser más claro.
Las variantes permiten definir estados compartidos y coordinar animaciones entre componentes padre e hijos de una forma más mantenible.
Framer Motion vs CSS en proyectos React
En React, la comparación cambia un poco porque no estamos hablando solo de estilos. Estamos hablando de componentes, estado, renderizado y experiencia de usuario.
CSS sigue siendo ideal para el diseño base
Aunque uses Framer Motion, CSS no desaparece. De hecho, no debería desaparecer.
CSS debería seguir encargándose de:
- Layout.
- Tipografía.
- Colores.
- Espaciados.
- Estados visuales simples.
- Responsive design.
- Variables de diseño.
- Estilos base de los componentes.
Framer Motion no sustituye a CSS. Lo complementa.
Una buena arquitectura suele dejar que CSS resuelva la presentación y que Motion se encargue del comportamiento animado más complejo.
Framer Motion encaja cuando el estado manda
Si una animación depende de isOpen, selectedItem, activeTab, isDragging, isVisible o cualquier estado de React, Framer Motion empieza a tener más sentido.
Por ejemplo, un sistema de pestañas con indicador animado puede resolverse con CSS si es simple. Pero si el indicador debe moverse entre elementos dinámicos, adaptarse a cambios de tamaño y coordinarse con contenido que entra y sale, Motion React probablemente será una opción más cómoda.
No todo en React necesita una librería de animación
Este punto es importante: que tu proyecto esté hecho en React no significa que todas las animaciones tengan que estar hechas con Framer Motion.
Puedes usar CSS perfectamente dentro de componentes React. Puedes aplicar clases condicionales, CSS Modules, Tailwind CSS, Styled Components o cualquier sistema de estilos que ya uses.
La pregunta no es “¿estoy en React?”.
La pregunta es: ¿la animación depende de la lógica de React o solo de un cambio visual?
Cómo combinar CSS y Framer Motion sin crear caos
La mejor estrategia no suele ser elegir una herramienta y prohibir la otra. Lo más inteligente es definir criterios.
Regla práctica para decidir
Puedes usar esta regla como punto de partida:
- CSS para animaciones visuales simples, repetitivas o ligadas a estados de estilo.
- Framer Motion para animaciones dinámicas, interactivas o ligadas al ciclo de vida del componente.
Dicho de otra manera: si puedes explicar la animación solo con CSS y sigue siendo clara, usa CSS. Si necesitas explicar qué ocurre cuando cambia el estado, entra un componente, sale otro, se reorganiza una lista o el usuario arrastra algo, considera Framer Motion.
Crea una pequeña guía interna de animación
En proyectos medianos o grandes, conviene documentar cómo se van a usar las animaciones. No hace falta crear un documento enorme. Basta con definir algunos criterios:
Qué debería ir con CSS
- Hover de botones.
- Focus de formularios.
- Transiciones de color.
- Microinteracciones simples.
- Loaders básicos.
- Estados activos.
- Animaciones decorativas pequeñas.
Qué debería ir con Framer Motion
- Modales con entrada y salida.
- Menús móviles complejos.
- Animaciones de layout.
- Transiciones entre vistas.
- Elementos arrastrables.
- Listas dinámicas.
- Secuencias coordinadas.
- Animaciones dependientes del estado.
Esta separación ayuda a evitar dos problemas habituales: duplicar lógica y crear animaciones inconsistentes.
Rendimiento: qué opción es más eficiente
No hay una respuesta universal. Una animación CSS mal planteada puede rendir peor que una animación con Framer Motion bien construida. Y una animación con Framer Motion innecesaria puede añadir complejidad donde no hacía falta.
El rendimiento depende de qué animas
Más que obsesionarte con la herramienta, presta atención a las propiedades que animas.
En general, intenta animar:
opacitytransformscaletranslaterotate
Y evita abusar de propiedades que afectan al layout, como:
widthheighttopleftmarginpadding
Cuando animas propiedades que obligan al navegador a recalcular el layout, puedes provocar saltos, bloqueos o sensación de interfaz pesada.
El coste también está en el mantenimiento
El rendimiento no es solo frames por segundo. También existe el rendimiento del equipo.
Una animación CSS llena de clases condicionales, delays manuales y hacks puede ser más difícil de mantener que una implementación clara con Framer Motion.
Del mismo modo, usar Framer Motion para una transición de color puede hacer que un componente simple parezca más complejo de lo necesario.
La mejor solución es la que mantiene equilibrados tres aspectos: fluidez, claridad y coste de mantenimiento.
Accesibilidad: reducir movimiento también importa
Las animaciones pueden mejorar la comprensión de una interfaz, pero también pueden molestar, marear o dificultar la experiencia a algunas personas.
Por eso, cualquier comparación entre CSS animations vs Framer Motion debería incluir accesibilidad.
En CSS, usa prefers-reduced-motion
CSS permite detectar si la persona ha configurado su sistema para reducir movimiento.
Un patrón básico sería:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
scroll-behavior: auto;
}
}
Este enfoque debe aplicarse con cuidado. No siempre hace falta eliminar todo movimiento; a veces basta con reducir desplazamientos grandes, quitar parallax o sustituir movimiento por cambios de opacidad.
En Framer Motion, adapta la animación
En Motion React también puedes adaptar el comportamiento cuando el usuario prefiere menos movimiento. Por ejemplo, puedes evitar desplazamientos en x o y y conservar una transición de opacidad más suave.
La idea no es castigar visualmente la experiencia reducida, sino diseñar una alternativa más tranquila.
Errores comunes al elegir entre Framer Motion y CSS
Elegir bien también significa evitar algunos errores bastante frecuentes.
Usar Framer Motion para todo
Framer Motion es una herramienta potente, pero no debería convertirse en la respuesta automática a cualquier animación. Si todo se anima con JavaScript, incluso los estados más simples, puedes añadir complejidad innecesaria.
Un hover de botón no necesita una gran arquitectura de animación.
Forzar CSS para animaciones de estado complejas
El error contrario también existe. A veces se intenta resolver con CSS una animación que depende claramente del montaje, desmontaje o reordenación de componentes.
El resultado suele ser una mezcla difícil de seguir: clases condicionales, temporizadores, estados duplicados y comportamientos frágiles.
Animar sin intención
Una animación no debería estar ahí solo porque queda bonita. Debería ayudar a entender la interfaz.
Una buena animación puede:
- Indicar que algo ha cambiado.
- Guiar la atención.
- Suavizar una transición.
- Dar feedback a una acción.
- Explicar una relación entre elementos.
Una mala animación solo añade ruido.
Entonces, ¿cuándo usar cada opción?
Si quieres una respuesta directa, podríamos resumirlo así:
Usa animaciones CSS cuando necesites movimientos simples, ligeros y muy vinculados al estilo visual. Son perfectas para microinteracciones, hover, focus, loaders, transiciones básicas y detalles de interfaz.
Usa Framer Motion o Motion React cuando la animación dependa del estado de React, del montaje o desmontaje de componentes, de cambios de layout, de gestos, de secuencias coordinadas o de interacciones más avanzadas.
En la mayoría de proyectos profesionales, la mejor respuesta no será “CSS o Framer Motion”, sino CSS y Framer Motion, cada uno en su lugar.
Preguntas frecuentes sobre Framer Motion vs CSS
¿Framer Motion reemplaza a las animaciones CSS?
No. Framer Motion no reemplaza a CSS. Lo complementa. CSS sigue siendo la base para estilos, layout, responsive design y muchas microinteracciones. Framer Motion tiene más sentido cuando necesitas animaciones conectadas con el estado, la presencia de componentes, el layout o los gestos del usuario.
¿Qué es mejor para animaciones CSS en React?
Para animaciones simples en React, CSS suele ser suficiente. Puedes usar clases condicionales, CSS Modules, Tailwind CSS o cualquier sistema de estilos. Para animaciones más complejas, especialmente si dependen del estado o del montaje y desmontaje de componentes, Framer Motion puede ser una opción más clara y mantenible.
¿Cuándo usar Framer Motion en vez de CSS?
Conviene usar Framer Motion cuando necesitas animaciones de entrada y salida, transiciones entre layouts, elementos arrastrables, gestos, secuencias coordinadas o animaciones directamente conectadas con el estado de React. Si la animación es puramente visual y sencilla, probablemente CSS sea mejor opción.
Movimiento con intención
Comparar Framer Motion vs animaciones CSS no debería llevarnos a defender una herramienta como si fuera una identidad profesional. En desarrollo frontend, la madurez no está en usar siempre la librería más potente ni en resolverlo todo con CSS por orgullo técnico. Está en elegir con criterio.
Una animación bien diseñada no se nota por ser espectacular, sino porque hace que la interfaz se entienda mejor. Ayuda a la persona usuaria a saber qué ha pasado, dónde mirar y cómo continuar.
CSS te da ligereza, control visual y cercanía con el sistema de diseño. Framer Motion te da expresividad, integración con React y herramientas muy potentes para estados, gestos y layouts dinámicos.
La clave está en no sobredimensionar el problema. Si una transición sencilla resuelve la experiencia, CSS será tu mejor aliado. Si la interfaz necesita movimiento conectado con la lógica del componente, Motion React puede ahorrarte complejidad y mejorar la claridad del código.
Al final, animar bien no consiste en mover más cosas. Consiste en mover las justas, en el momento adecuado y por una razón clara.