Las animaciones CSS pueden hacer que una web se sienta más fluida, profesional y agradable de usar. Un botón que responde con suavidad, una tarjeta que aparece de forma progresiva, un menú móvil que se despliega sin golpes visuales o un pequeño cambio de estado al pasar el cursor pueden mejorar muchísimo la percepción de calidad de una interfaz.

Pero también ocurre lo contrario. Una animación mal planteada puede distraer, ralentizar la navegación, generar sensación de desorden o incluso afectar a la accesibilidad. Por eso, antes de publicar una web, conviene revisar las animaciones con el mismo cuidado con el que revisamos los textos, los enlaces, el responsive, el SEO o el rendimiento.

Esta checklist para revisar animaciones CSS está pensada para ayudarte a comprobar si tus efectos realmente aportan valor a la experiencia de usuario. No se trata de animar por animar, sino de asegurarte de que cada movimiento tenga una intención clara, sea fluido, accesible y coherente con el diseño general del proyecto.

Si estás trabajando en una web con muchas interacciones, también puede ayudarte complementar esta revisión con otros contenidos relacionados, como la guía sobre por qué animar transform y opacity antes que width o height o el artículo sobre cómo crear microinteracciones con CSS.

Por qué revisar las animaciones CSS antes de publicar

Una animación CSS bien diseñada no debería robar protagonismo al contenido. Su función principal es acompañar al usuario, reforzar una acción o explicar visualmente un cambio de estado. Cuando el movimiento está bien integrado, la interfaz se percibe más natural. Cuando está mal resuelto, el usuario lo nota enseguida, aunque no siempre sepa decir exactamente qué falla.

Puede que una transición sea demasiado lenta. Puede que un efecto aparezca en un momento innecesario. Puede que una animación funcione bien en escritorio, pero resulte incómoda en móvil. O puede que el movimiento sea atractivo visualmente, pero no respete las preferencias de accesibilidad de quienes han configurado la reducción de movimiento en su sistema.

Revisar las animaciones CSS antes del lanzamiento te ayuda a detectar estos problemas a tiempo. Además, permite conseguir una experiencia más coherente, ligera y profesional.

Una web no solo debe verse bien en una captura estática. También debe sentirse bien cuando se navega, se hace clic, se abre un menú, se carga contenido o se interactúa con un formulario.

Checklist general: ¿la animación tiene sentido?

Antes de entrar en detalles técnicos, conviene empezar por la pregunta más importante: ¿la animación aporta algo real?

¿Cada animación tiene una intención clara?

La primera revisión debe ser conceptual. Mira cada animación de la web y pregúntate: “¿para qué está aquí?”.

Una buena animación CSS puede servir para:

• Guiar la atención hacia un elemento importante.
• Confirmar una acción del usuario.
• Suavizar la aparición o desaparición de contenido.
• Mostrar el cambio entre dos estados.
• Mejorar la percepción de carga.
• Reforzar la personalidad visual de la marca.

En cambio, una animación que existe solo porque “queda bonita” puede convertirse en ruido visual. Esto no significa que todas las animaciones deban ser estrictamente funcionales, pero sí deberían tener una justificación dentro del diseño.

Por ejemplo, una tarjeta que se eleva ligeramente al pasar el cursor comunica que es interactiva. Ese movimiento tiene sentido. Pero si todas las tarjetas, iconos, títulos, fondos y botones se mueven a la vez, la interfaz puede volverse confusa.

La clave está en diferenciar entre movimiento útil y movimiento decorativo sin control.

¿La animación mejora la experiencia de usuario?

Las buenas prácticas en animaciones CSS parten de una idea sencilla: el movimiento debe ayudar, no molestar.

Antes de publicar, revisa si las animaciones:

• Ayudan a entender qué está ocurriendo.
• No retrasan acciones importantes.
• No ocultan contenido necesario.
• No dificultan la navegación.
• No compiten con los botones principales.
• No se repiten de forma innecesaria.

Una animación puede parecer elegante durante el diseño, pero resultar pesada cuando se usa varias veces. Por eso es importante probar la web como lo haría una persona usuaria: abrir menús, hacer clic, volver atrás, desplazarse por la página, leer contenido y repetir acciones.

Si una animación impresiona la primera vez, pero molesta la quinta, probablemente necesita ajustes.

Revisión de rendimiento: animaciones CSS fluidas y ligeras

El rendimiento es uno de los aspectos más importantes al revisar animaciones CSS. Una web puede tener una estética muy cuidada, pero si las animaciones van a tirones, la experiencia se percibirá como poco pulida.

¿Estás animando las propiedades adecuadas?

No todas las propiedades CSS tienen el mismo coste para el navegador. Algunas obligan a recalcular el layout o repintar partes de la página, lo que puede afectar a la fluidez.

Como regla general, conviene priorizar animaciones basadas en transform y opacity. Son propiedades especialmente útiles para crear efectos suaves sin forzar tantos cambios en la estructura del documento.

Ejemplo menos recomendable:

.card {
  position: relative;
  top: 0;
  transition: top 0.3s ease;
}

.card:hover {
  top: -8px;
}

Ejemplo más recomendable:

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
}

Ambos ejemplos pueden parecer similares visualmente, pero el segundo suele ser más adecuado para conseguir una animación fluida. Si quieres profundizar en este tema, puedes revisar el artículo sobre animar transform y opacity en lugar de propiedades como width, height, top o left.

¿La animación evita saltos de layout?

Otro punto importante es comprobar que la animación no provoque desplazamientos inesperados en la página. Esto suele ocurrir cuando se animan tamaños, posiciones o elementos que afectan al flujo natural del documento.

Presta especial atención a:

• Menús desplegables.
• Acordeones.
• Modales.
• Tarjetas interactivas.
• Banners superiores.
• Elementos sticky.
• Bloques que aparecen al hacer scroll.

Si una animación mueve otros elementos sin que el usuario lo espere, puede generar sensación de inestabilidad. En muchos casos, conviene reservar el espacio necesario, animar con transform o replantear la interacción para evitar saltos visuales.

¿La duración de las animaciones es adecuada?

La duración influye directamente en cómo se percibe una interfaz. Una animación muy rápida puede parecer brusca. Una demasiado lenta puede hacer que la web se sienta pesada.

No existe una duración perfecta para todos los casos, pero puedes usar estas referencias como orientación:

• Microinteracciones: entre 150 ms y 250 ms.
• Transiciones de componentes: entre 200 ms y 400 ms.
• Entradas visuales más expresivas: entre 400 ms y 700 ms.
• Animaciones decorativas: mejor usarlas con mucha moderación.

Lo importante es adaptar la duración al contexto. No es lo mismo animar un icono pequeño que una sección completa.

Antes de publicar, pregúntate:

• ¿La animación se siente lenta al repetirla?
• ¿Retrasa una acción importante?
• ¿Ayuda a entender el cambio de estado?
• ¿Es coherente con el resto de animaciones?
• ¿Funciona bien tanto en móvil como en escritorio?

Una interfaz fluida no necesita moverse mucho. Necesita moverse en el momento adecuado.

Revisión de accesibilidad en animaciones CSS

La accesibilidad no se limita al contraste, la navegación por teclado o las etiquetas semánticas. El movimiento también forma parte de una experiencia inclusiva.

Algunas personas pueden sentir incomodidad, mareo, fatiga visual o dificultad de concentración ante ciertos tipos de animaciones. Por eso, una buena revisión antes de publicar debe incluir siempre criterios de accesibilidad.

¿Has incluido soporte para prefers-reduced-motion?

Uno de los puntos esenciales de cualquier checklist de animaciones CSS es comprobar si la web respeta la preferencia de reducción de movimiento del usuario.

La media query prefers-reduced-motion permite adaptar las animaciones cuando una persona ha indicado en su sistema operativo que prefiere menos movimiento.

Ejemplo básico:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

Este enfoque puede servir como base, aunque no siempre es necesario eliminar todo movimiento. En muchos casos, basta con reducirlo o sustituir una animación de desplazamiento por una transición de opacidad más discreta.

Ejemplo más específico:

.hero-title {
  animation: slide-in 0.6s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: fade-in 0.2s ease both;
  }
}

Aquí no se elimina por completo la entrada del título, pero se reduce el movimiento espacial. Si quieres ampliar este punto, te puede interesar el artículo sobre prefers-reduced-motion y accesibilidad en animaciones CSS.

¿Hay animaciones que parpadean o se repiten demasiado?

Las animaciones con parpadeos, destellos o cambios bruscos de luminosidad deben tratarse con especial cuidado. Además de resultar molestas, pueden ser problemáticas para algunas personas.

Antes de publicar, revisa cualquier elemento que:

• Parpadee de forma continua.
• Cambie de color de manera agresiva.
• Use flashes o destellos.
• Se mueva sin pausa.
• Se reproduzca en bucle sin una razón clara.
• Distraiga durante la lectura.

Una animación infinita puede tener sentido en un loader o en un indicador de actividad. Sin embargo, no debería convertirse en un elemento permanente que compita con el contenido principal.

¿La web sigue siendo usable sin animaciones?

Una buena prueba consiste en reducir o desactivar las animaciones y comprobar si la web sigue siendo comprensible.

Las animaciones pueden reforzar la experiencia, pero no deberían ser el único modo de comunicar información importante. Por ejemplo, si un campo incorrecto de un formulario solo “tiembla” para indicar error, pero no muestra un mensaje textual, la señal puede pasar desapercibida.

Lo recomendable es combinar el movimiento con texto, color, iconografía y atributos accesibles cuando corresponda.

La animación debe ser una ayuda, no una dependencia.

Revisión de consistencia visual

Las animaciones también forman parte del sistema visual de una web. Igual que definimos colores, tipografías, espaciados y componentes, deberíamos definir criterios de movimiento.

¿Las animaciones siguen una lógica común?

Una web con animaciones coherentes se siente más cuidada. En cambio, si cada componente usa una duración, una curva y un estilo diferente, el resultado puede parecer improvisado.

Antes de publicar, revisa si tus animaciones comparten:

• Duraciones similares según el tipo de interacción.
• Curvas de aceleración coherentes.
• Distancias de movimiento proporcionadas.
• Estilo visual alineado con la marca.
• Intensidad adecuada para el contexto.
• Un mismo criterio para entradas, salidas y estados hover.

Esto no significa que todas las animaciones deban ser idénticas. Significa que deberían pertenecer a la misma familia visual.

Si estás creando un sistema de interacciones para varios componentes, también puedes apoyarte en la guía sobre animaciones hover para botones modernos con CSS para mantener una lógica común en botones, enlaces y llamadas a la acción.

¿Las curvas de aceleración se sienten naturales?

La propiedad transition-timing-function y las curvas usadas en animation-timing-function influyen mucho en la percepción del movimiento.

Un valor linear puede funcionar para un loader, pero suele sentirse demasiado mecánico en una interacción de interfaz. En muchos casos, ease, ease-out o una curva personalizada con cubic-bezier() ofrecen un resultado más natural.

Ejemplo:

.button {
  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.button:hover {
  transform: translateY(-2px);
}

Para interfaces profesionales, suele ser mejor apostar por movimientos sutiles y curvas suaves. Las animaciones con rebotes exagerados pueden funcionar en productos lúdicos, pero no siempre encajan en una web corporativa, editorial o de servicios.

¿El movimiento respeta la jerarquía del contenido?

No todos los elementos necesitan la misma cantidad de movimiento. Si todo se anima con la misma intensidad, nada destaca realmente.

Antes de publicar, observa la página completa y pregúntate:

• ¿Qué elemento debería captar primero la atención?
• ¿La animación refuerza esa jerarquía?
• ¿Hay elementos secundarios compitiendo con el CTA principal?
• ¿Se puede leer sin distracciones?
• ¿El movimiento aparece en el momento adecuado?

Una animación de entrada en el hero puede funcionar muy bien. Pero si al mismo tiempo se mueven el fondo, el titular, los iconos, las tarjetas y los botones, la atención se dispersa.

En diseño de interfaces, el silencio visual también importa.

Revisión responsive: animaciones CSS en móvil y escritorio

Una animación que funciona en escritorio no siempre funciona en móvil. Los dispositivos cambian el tamaño de pantalla, la forma de interacción, la potencia disponible y el contexto de uso.

¿Las animaciones funcionan bien en pantallas pequeñas?

En móvil hay menos espacio. Por eso, los desplazamientos largos pueden sentirse más invasivos. Una tarjeta que se mueve 40 píxeles en escritorio puede resultar exagerada en una pantalla pequeña.

Antes de publicar, revisa especialmente:

• Efectos hover.
• Menús móviles.
• Modales.
• Animaciones al hacer scroll.
• Elementos sticky.
• Carruseles.
• Loaders y skeleton screens.

También conviene probar con distintos tamaños: móvil pequeño, móvil grande, tablet y escritorio.

Si estás trabajando con navegación responsive, puedes completar esta revisión con la guía sobre cómo animar un menú móvil con CSS.

¿Los efectos hover tienen alternativa en dispositivos táctiles?

Muchas animaciones CSS se diseñan pensando en :hover, pero en dispositivos táctiles ese estado no funciona igual. Puede no activarse, quedarse “pegado” o no aportar información útil.

Si una animación comunica interactividad, asegúrate de que el componente sea claro incluso sin hover. Un botón debe parecer botón antes de animarse. Una tarjeta clicable debe resultar reconocible sin depender de que el usuario pase el cursor.

Puedes limitar algunos efectos a dispositivos donde el hover tiene sentido:

@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
  }
}

Este detalle mejora la experiencia en móvil y evita comportamientos extraños en pantallas táctiles.

Revisión de animaciones al hacer scroll

Las animaciones vinculadas al scroll pueden aportar dinamismo, pero también son fáciles de abusar. Si cada bloque aparece con un efecto distinto, la navegación puede volverse pesada.

¿Las animaciones de scroll acompañan la lectura?

Las animaciones al hacer scroll deberían acompañar el ritmo de lectura, no interrumpirlo. Un contenido que aparece demasiado tarde puede generar frustración. Un efecto demasiado llamativo puede hacer que el usuario pierda el hilo.

Antes de publicar, revisa:

• Si el contenido aparece a tiempo.
• Si la animación se reproduce solo cuando tiene sentido.
• Si la velocidad acompaña el desplazamiento natural.
• Si los elementos importantes no quedan ocultos.
• Si la experiencia sigue siendo fluida en móvil.
• Si el usuario puede navegar rápido sin perder información.

Este punto es especialmente importante en artículos largos, páginas de venta y portfolios. En estos casos, la animación debe facilitar el recorrido, no convertir cada sección en un obstáculo.

Para ampliar esta parte, puedes consultar el artículo sobre scroll-driven animations: qué son y cómo usarlas o la guía específica sobre animaciones CSS con animation-timeline.

¿La animación aporta contexto o solo espectáculo?

Una animación de scroll puede ser útil para revelar información de forma progresiva, mostrar una secuencia visual o reforzar una narrativa. Pero si cada sección entra desde una dirección diferente sin una razón clara, el resultado puede parecer artificial.

Una buena práctica es reservar los efectos más expresivos para momentos concretos: el hero, una sección destacada, una llamada a la acción o una demostración visual. Para el resto, pueden bastar transiciones discretas de opacidad y desplazamiento leve.

Revisión del código CSS y mantenimiento

Las animaciones también deben ser fáciles de mantener. Un proyecto puede empezar con dos transiciones sencillas y terminar con decenas de efectos repartidos por toda la hoja de estilos.

Si no hay orden, cualquier cambio futuro se vuelve más difícil.

¿Los keyframes tienen nombres claros?

Los nombres de @keyframes deberían describir el efecto o la intención. Evita nombres genéricos como animation1, move, effect o test.

Mejor:

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Un nombre como fade-in-up permite entender rápidamente qué hace la animación. Esto facilita el mantenimiento y mejora la colaboración con otras personas del equipo.

¿Usas variables para controlar el movimiento?

Si el proyecto incluye varias animaciones, puede ser buena idea definir variables CSS para duraciones, curvas y distancias.

Ejemplo:

:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-distance-sm: 8px;
}

Después puedes reutilizarlas:

.card {
  transition:
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

Este enfoque ayuda a mantener coherencia y evita que cada componente tenga valores arbitrarios.

¿Hay animaciones duplicadas?

Antes de publicar, revisa si tienes varios @keyframes haciendo prácticamente lo mismo.

Por ejemplo:

• fadeIn
• fade-in
• showElement
• appear
• opacityIn

Si todas hacen algo parecido, conviene simplificar. Un CSS más limpio pesa menos, es más fácil de mantener y reduce errores.

Revisión de estados interactivos

Las animaciones suelen aparecer en estados de interacción: hover, focus, active, open, closed, loading, success o error. Revisar estos estados es fundamental antes del lanzamiento.

¿Los estados focus son visibles?

Nunca deberíamos eliminar el outline sin ofrecer una alternativa clara. Si animas estados de foco, asegúrate de que siguen siendo visibles para personas que navegan con teclado.

Ejemplo:

.button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

Puedes animar algunos detalles, pero el foco debe seguir siendo evidente. La estética no debería estar por encima de la accesibilidad.

¿Los estados de carga comunican progreso?

Loaders, skeleton screens y spinners son recursos útiles, pero deben usarse con criterio. Un loader animado puede tranquilizar al usuario durante una espera corta, pero también puede resultar frustrante si aparece demasiado tiempo o no explica qué está ocurriendo.

Antes de publicar, revisa:

• Si el loader aparece solo cuando es necesario.
• Si no se muestra durante cargas casi instantáneas.
• Si tiene alternativa reducida para usuarios con menos movimiento.
• Si no bloquea toda la interfaz sin motivo.
• Si el contenido final aparece de forma suave.

En muchos casos, un skeleton loader discreto puede resultar más útil que un spinner centrado sin contexto. Si estás trabajando esta parte, puedes revisar la guía sobre skeleton loaders con CSS o el artículo sobre cómo crear loaders animados solo con CSS.

Checklist final para revisar animaciones CSS

Antes de publicar tu web, puedes usar esta checklist como revisión rápida.

UX y propósito

• Cada animación tiene una intención clara.
• El movimiento ayuda a entender la interfaz.
• Las animaciones no retrasan acciones importantes.
• Los efectos no distraen del contenido principal.
• La jerarquía visual se mantiene clara.

Rendimiento

• Se priorizan transform y opacity.
• Se evitan animaciones innecesarias de width, height, top o left.
• No hay saltos de layout inesperados.
• Las animaciones se sienten fluidas.
• Se han probado en dispositivos reales.

Accesibilidad

• Existe soporte para prefers-reduced-motion.
• No hay parpadeos agresivos.
• Las animaciones infinitas están justificadas.
• La web sigue siendo usable sin animaciones.
• Los estados de foco son visibles.

Diseño y consistencia

• Las duraciones son coherentes.
• Las curvas de aceleración siguen una lógica común.
• Las animaciones respetan el tono visual de la marca.
• No hay exceso de movimiento.
• Los efectos importantes destacan sin saturar.

Responsive y dispositivos

• Las animaciones funcionan en móvil.
• Los efectos hover no son imprescindibles en táctil.
• Los menús y modales se abren con suavidad.
• Las animaciones de scroll no bloquean la lectura.
• La experiencia se mantiene en distintos navegadores.

Código y mantenimiento

• Los @keyframes tienen nombres claros.
• No hay animaciones duplicadas.
• Se usan variables o tokens cuando el proyecto lo requiere.
• El CSS es comprensible.
• Las animaciones pueden modificarse sin romper otros componentes.

Errores frecuentes al revisar animaciones CSS

Aunque cada proyecto es distinto, hay errores que se repiten con frecuencia.

Animar demasiado

Uno de los errores más habituales es pensar que una web con más movimiento será automáticamente más atractiva. En realidad, el exceso de animación puede hacer que la interfaz parezca menos profesional.

El movimiento debe dosificarse. Una animación sutil en el momento adecuado suele tener más impacto que varios efectos compitiendo entre sí.

Usar la misma animación para todo

Otro error común es aplicar el mismo efecto a títulos, botones, tarjetas, imágenes y bloques de texto. Esto puede parecer coherente al principio, pero también puede volver la experiencia monótona.

La consistencia no significa repetición absoluta. Puedes crear un sistema de movimiento con pequeñas variaciones según la importancia del elemento.

No probar la animación en contexto real

Una animación aislada puede parecer perfecta en un componente, pero no funcionar igual dentro de una página completa.

Por eso, conviene revisar siempre las animaciones con textos reales, imágenes reales, contenido cargado y navegación completa.

Olvidar la accesibilidad

No incluir prefers-reduced-motion, depender solo del movimiento para comunicar estados o crear efectos demasiado intensos son errores que pueden afectar a muchas personas usuarias.

La accesibilidad no limita la creatividad. Al contrario, ayuda a diseñar con más intención.

Cómo documentar tus animaciones CSS

Si trabajas en un proyecto grande o en equipo, documentar las animaciones puede ahorrar mucho tiempo. No hace falta crear un sistema complejo desde el principio. Basta con definir algunos criterios básicos.

Qué conviene documentar

Puedes incluir:

• Duraciones estándar.
• Curvas de aceleración.
• Distancias de desplazamiento.
• Tipos de animación permitidos.
• Casos en los que no se debe animar.
• Reglas para prefers-reduced-motion.
• Ejemplos de componentes animados.

Ejemplo de mini guía interna:

:root {
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 400ms;
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
}

Y una regla sencilla:

Las microinteracciones deben ser rápidas, sutiles y no deben desplazar contenido esencial. Las animaciones de entrada deben usarse solo cuando ayuden a comprender la jerarquía de la página.

Este tipo de documentación evita decisiones improvisadas y ayuda a mantener una identidad visual consistente.

Preguntas frecuentes sobre revisar animaciones CSS

¿Cuántas animaciones CSS debería tener una web?

No existe un número ideal. Depende del tipo de proyecto, la identidad visual y la complejidad de la interfaz. Lo importante es que cada animación tenga una función clara.

Una web corporativa puede necesitar movimientos muy sutiles, mientras que una landing creativa puede permitirse efectos más expresivos. En cualquier caso, si el movimiento no aporta valor, es mejor reducirlo.

¿Es mejor usar transition o animation en CSS?

Depende del caso. transition suele ser ideal para cambios simples entre estados, como hover, focus o apertura de un elemento. animation, en cambio, es más adecuada para secuencias definidas con @keyframes, efectos de entrada, loaders o movimientos más complejos.

Si quieres profundizar en esta diferencia, puedes leer el artículo sobre transition vs animation en CSS.

¿Debo eliminar todas las animaciones con prefers-reduced-motion?

No necesariamente. En muchos casos basta con reducir, simplificar o sustituir el movimiento. Por ejemplo, puedes cambiar un desplazamiento amplio por un fundido breve.

Lo importante es respetar la preferencia del usuario y evitar movimientos innecesarios, intensos o repetitivos.

Reflexión final: animar menos, animar mejor

Revisar animaciones CSS antes de publicar una web no es un detalle menor. Es una parte importante del acabado profesional de una interfaz.

Una animación puede mejorar la comprensión, reforzar la jerarquía visual y hacer que una web se sienta más cuidada. Pero también puede generar ruido, afectar al rendimiento o excluir a personas usuarias si no se implementa con criterio.

Por eso, la mejor pregunta no es “¿cómo puedo animar más?”, sino “¿cómo puedo animar mejor?”.

Una buena animación CSS debería ser intencional, ligera, accesible y coherente. Debería acompañar al contenido, no competir con él. Debería sentirse natural, no forzada. Y, sobre todo, debería mejorar la experiencia de usuario.

Antes de publicar tu próxima web, dedica unos minutos a revisar esta checklist. Comprueba el propósito, la fluidez, la accesibilidad, el responsive y la consistencia visual.

Puede parecer un paso pequeño, pero marca una gran diferencia en la percepción final del proyecto. Porque una interfaz bien animada no es la que más se mueve, sino la que sabe moverse en el momento justo.