Diferencia entre transition y animation en CSS

Cuando empezamos a añadir movimiento a una interfaz web, es muy habitual encontrarnos con dos propiedades que parecen hacer algo parecido: transition y animation. Ambas permiten animar elementos con CSS, ambas ayudan a que una interfaz se sienta más fluida y ambas pueden mejorar la experiencia de usuario cuando se usan con intención.

Pero aunque a simple vista puedan parecer intercambiables, no sirven exactamente para lo mismo.

La diferencia entre transition y animation en CSS está en cómo se activa el movimiento, cuánto control tenemos sobre los pasos intermedios y qué tipo de comportamiento queremos conseguir. Dicho de forma sencilla: una transition anima el cambio entre dos estados, mientras que una animation permite crear una secuencia de movimiento más completa mediante @keyframes.

Esta diferencia parece pequeña, pero en la práctica cambia mucho la forma de trabajar. No es lo mismo suavizar el cambio de color de un botón al hacer hover que crear un loader, una entrada animada de tarjetas, una ilustración en movimiento o un efecto que se repite en bucle.

En este artículo vamos a ver cuándo usar transition y cuándo usar animation en CSS, con ejemplos claros, comparaciones prácticas y recomendaciones para tomar mejores decisiones en proyectos reales.

Si estás empezando a trabajar con movimiento en interfaces, también puede resultarte útil complementar esta lectura con la guía de animaciones CSS para crear interfaces con más vida, donde se explican conceptos base para entender mejor cómo aplicar animaciones sin caer en el exceso.

Qué es una transition en CSS

Una transition en CSS permite animar el cambio de una propiedad cuando un elemento pasa de un estado a otro. Es decir, CSS detecta que una propiedad ha cambiado y, en lugar de aplicar ese cambio de golpe, lo interpola suavemente durante un tiempo determinado.

Por ejemplo, imagina un botón que cambia de color cuando el usuario pasa el ratón por encima. Sin transition, el color cambia de forma inmediata. Con transition, ese cambio se suaviza.

.button {
  background-color: #cc2b5e;
  color: white;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #753a88;
  transform: translateY(-2px);
}

En este caso, la transición se produce porque hay un cambio de estado: el botón pasa de su estado normal a su estado :hover.

La idea importante es esta: una transition necesita que algo cambie. Ese cambio puede estar provocado por una pseudoclase como :hover, :focus-visible o :active, por una clase añadida con JavaScript o por un cambio en el DOM.

Por eso las transiciones son tan habituales en botones, enlaces, campos de formulario, tarjetas interactivas, menús desplegables y otros componentes de interfaz.

Cómo funciona una transition

Una transición suele componerse de cuatro partes principales:

transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;

También podemos escribirlo en formato abreviado:

transition: background-color 0.3s ease 0s;

• transition-property indica qué propiedad se va a animar.
• transition-duration define cuánto tarda el cambio.
• transition-timing-function controla el ritmo de la transición.
• transition-delay añade un retraso antes de iniciar el efecto.

.card {
  opacity: 0.8;
  transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.card:hover {
  opacity: 1;
  transform: scale(1.03);
}

Aquí estamos animando dos propiedades: opacity y transform. Ambas son buenas candidatas para animaciones porque suelen ofrecer buen rendimiento en navegador.

Cuándo usar transition CSS

Conviene usar transition cuando queremos animar un cambio simple entre dos estados. Es especialmente útil en elementos interactivos de una interfaz.

• Botones que cambian de color al hacer hover.
• Enlaces que muestran un subrayado suave.
• Tarjetas que se elevan ligeramente al pasar el cursor.
• Campos de formulario que cambian el borde al recibir foco.
• Menús que se despliegan al añadir una clase.
• Modales que aparecen con un cambio de opacidad.

.input {
  border: 2px solid #ddd;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus {
  border-color: #cc2b5e;
  box-shadow: 0 0 0 4px rgba(204, 43, 94, 0.15);
}

En este caso, la transición mejora la experiencia sin llamar demasiado la atención. El usuario entiende que el campo está activo, pero el efecto no compite con el contenido.

Este tipo de detalle es especialmente importante en componentes accesibles. Por ejemplo, cuando trabajamos estados de foco, conviene cuidar tanto el movimiento como la visibilidad del indicador. Si quieres profundizar en esta parte, puedes leer el artículo sobre focus visible y navegación con teclado.

Qué es una animation en CSS

Una animation en CSS permite definir una secuencia de movimiento usando @keyframes. A diferencia de transition, no se limita a pasar de un estado inicial a un estado final. Puede tener varios pasos intermedios, repetirse, alternarse, pausarse o ejecutarse automáticamente.

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

.icon {
  animation: float 3s ease-in-out infinite;
}

Aquí no estamos esperando a que el usuario haga hover ni a que cambie una clase. La animación empieza por sí misma y se repite indefinidamente.

Este es uno de los puntos clave en la comparación transition vs animation CSS: las animaciones con @keyframes no necesitan necesariamente una interacción para ejecutarse. Pueden iniciarse al cargar la página, al añadir una clase, al entrar un elemento en pantalla o cuando lo decidamos mediante JavaScript.

Cómo funciona animation CSS

Una animación CSS suele componerse de dos partes. Primero, definimos los pasos de la animación con @keyframes:

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

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

Después, aplicamos esa animación a un elemento:

.article-card {
  animation: fadeInUp 0.6s ease both;
}

La propiedad abreviada animation puede incluir varios valores:

animation: fadeInUp 0.6s ease 0.2s 1 normal both;

Ese código equivale, aproximadamente, a esto:

animation-name: fadeInUp;
animation-duration: 0.6s;
animation-timing-function: ease;
animation-delay: 0.2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;

La propiedad animation-fill-mode es especialmente importante. Cuando usamos both, el elemento respeta los estilos del primer y último fotograma antes y después de ejecutarse la animación. Esto ayuda a evitar saltos visuales extraños.

Cuándo usar animation CSS

Conviene usar animation cuando necesitamos más control sobre el movimiento o cuando el efecto no depende únicamente de un cambio entre dos estados.

• Loaders o spinners.
• Elementos que entran en pantalla.
• Ilustraciones animadas.
• Efectos decorativos que se repiten.
• Animaciones con varios pasos intermedios.
• Microinteracciones más elaboradas.
• Secuencias temporizadas.
• Skeleton loaders.
• Indicadores de atención, como un icono que pulsa suavemente.

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 32px;
  height: 32px;
  border: 4px solid #f8e0ea;
  border-top-color: #cc2b5e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Este sería un mal caso para transition, porque no hay realmente un cambio puntual entre dos estados. Queremos un movimiento continuo, repetitivo y autónomo. Ahí animation encaja mucho mejor.

Las animaciones también son muy útiles cuando trabajamos con ilustraciones CSS. Si te interesa este tipo de enfoque visual, puedes continuar con el artículo sobre cómo dibujar formas básicas con CSS o con la guía sobre pseudo-elementos en CSS para crear ilustraciones más complejas.

Diferencia entre transition y animation en CSS

La diferencia principal entre transition y animation en CSS puede resumirse así: transition anima un cambio de estado; animation define una secuencia de movimiento.

Una transición necesita que una propiedad cambie. Por ejemplo, un botón cambia su color en :hover. En cambio, una animación puede ejecutarse aunque no haya interacción del usuario, porque sus pasos están definidos dentro de @keyframes.

Comparativa rápida: transition vs animation CSS

Esta tabla ayuda, pero no debería entenderse como una regla rígida. En CSS casi siempre hay varias formas de resolver un mismo efecto. Lo importante es elegir la herramienta que haga el código más claro, mantenible y coherente con la intención del movimiento.

Ejemplo comparativo con transition

Supongamos que queremos que una tarjeta se eleve cuando el usuario pasa el cursor por encima.

.card {
  transform: translateY(0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

Este es un caso perfecto para transition. Hay un estado inicial y un estado final. No necesitamos pasos intermedios. Tampoco necesitamos que la tarjeta se mueva sola. La interacción del usuario activa el cambio.

Ejemplo comparativo con animation

Ahora imaginemos que queremos que esa misma tarjeta aparezca suavemente al cargar la página.

@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }

  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card {
  animation: cardEntrance 0.7s ease both;
}

Aquí animation tiene más sentido porque estamos creando una secuencia. La tarjeta no solo pasa de invisible a visible; tiene un pequeño movimiento intermedio que da sensación de entrada natural.

Cuándo usar transition y cuándo usar animation

La pregunta práctica no es solo qué diferencia hay entre ambas, sino cuándo conviene usar cada una. En proyectos reales, elegir bien evita código innecesario, mejora la experiencia de usuario y facilita el mantenimiento.

Usa transition para microinteracciones simples

Las transiciones son ideales para microinteracciones discretas. Por ejemplo, cuando un usuario interactúa con un botón, una tarjeta, un enlace o un campo de formulario.

.link {
  color: #753a88;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.link:hover {
  color: #cc2b5e;
  text-decoration-color: currentColor;
}

Este tipo de efecto no necesita @keyframes. Sería excesivo crear una animación para algo tan simple.

Cuando ocurra esto, quiero que esta propiedad cambie suavemente.

Si esa frase describe lo que necesitas, probablemente estás ante un buen caso para usar transition.

Usa animation para movimientos autónomos o secuenciales

Las animaciones CSS son mejores cuando necesitas una secuencia con más intención. Por ejemplo, cuando un elemento entra, sale, vibra, rota, pulsa, flota o se repite.

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.75;
  }
}

.notification-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

Este efecto sería incómodo de resolver con transition, porque no depende de un único cambio de estado. Queremos que el punto tenga vida propia y se repita.

Quiero que este elemento siga una secuencia de movimiento.

Si esa frase describe mejor tu intención, lo más probable es que necesites animation.

Regla sencilla para decidir

Una forma muy práctica de decidir es esta: si hay dos estados, normalmente usa transition. Si hay una secuencia, usa animation.

Si hay dos estados, usa transition

• normal / hover
• cerrado / abierto
• visible / invisible
• activo / inactivo
• enfocado / no enfocado

Si hay una secuencia, usa animation

• aparecer con rebote
• rotar indefinidamente
• parpadear varias veces
• entrar desde abajo y estabilizarse
• moverse siguiendo varios pasos
• repetir un efecto decorativo

Propiedades animables: un detalle importante

No todas las propiedades CSS se animan igual de bien. Tanto con transition como con animation, es recomendable priorizar propiedades que el navegador pueda procesar de forma eficiente.

Las más recomendables suelen ser:

transform
opacity

También se pueden animar propiedades como background-color, color, border-color o box-shadow, aunque algunas pueden tener más coste visual o de rendimiento según el caso.

En cambio, conviene tener cuidado con propiedades que afectan al layout, como:

width
height
top
left
margin
padding

No significa que estén prohibidas, pero pueden provocar recalculado de layout y afectar al rendimiento, especialmente si hay muchos elementos en pantalla.

/* Menos recomendable */
.box {
  position: relative;
  top: 0;
  transition: top 0.3s ease;
}

.box:hover {
  top: -10px;
}

/* Más recomendable */
.box {
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.box:hover {
  transform: translateY(-10px);
}

La segunda opción suele ser más fluida y predecible.

Este mismo criterio también se aplica cuando diseñamos efectos visuales más complejos. Si trabajas con composiciones CSS, fondos decorativos o ilustraciones adaptables, puedes complementar esta parte con el artículo sobre dibujar con CSS responsive.

Transition CSS con JavaScript: cambio de clases

Aunque muchas transiciones se activan con pseudoclases como :hover, también es muy común activarlas añadiendo o quitando clases con JavaScript.

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.is-open {
  transform: translateX(0);
}

const sidebar = document.querySelector('.sidebar');
const button = document.querySelector('.menu-button');

button.addEventListener('click', () => {
  sidebar.classList.toggle('is-open');
});

Este patrón es muy útil porque mantiene la animación en CSS y deja a JavaScript solo la responsabilidad de cambiar el estado.

Aquí vuelve a encajar transition, porque el elemento tiene dos estados claros: cerrado y abierto.

Animation CSS con clases: controlar cuándo empieza

Las animaciones también pueden activarse mediante clases. Esto es útil cuando no queremos que una animación se ejecute siempre al cargar la página, sino en un momento concreto.

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

.section {
  opacity: 0;
}

.section.is-visible {
  animation: reveal 0.6s ease both;
}

Este enfoque puede combinarse con IntersectionObserver para animar elementos cuando entran en el viewport.

const sections = document.querySelectorAll('.section');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
});

sections.forEach((section) => observer.observe(section));

En este caso, animation tiene sentido porque queremos una entrada definida con @keyframes. Si la entrada fuera muy simple, una transición también podría servir.

Errores comunes al elegir entre transition y animation

A veces el problema no está en conocer las propiedades, sino en usarlas en el contexto equivocado. Veamos algunos errores frecuentes.

Usar animation para cualquier hover

Si solo quieres cambiar el color, la escala o la sombra de un botón al hacer hover, normalmente no necesitas animation.

/* Excesivo para un simple hover */
@keyframes buttonHover {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.04);
  }
}

Sería más simple así:

.button {
  transform: scale(1);
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.04);
}

Menos código, misma intención y mejor legibilidad.

Usar transition para un loader

Un loader necesita repetición. Por tanto, animation es mucho más adecuada.

@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  animation: loading 1s linear infinite;
}

Aquí una transición no sería natural, porque no hay un único cambio de estado que queramos suavizar.

Animar demasiadas cosas a la vez

El movimiento debe ayudar, no distraer. Una interfaz llena de elementos que se mueven constantemente puede aumentar la carga cognitiva y hacer que el usuario pierda el foco.

• Para guiar la atención.
• Para reforzar una acción.
• Para comunicar cambio de estado.
• Para hacer más comprensible una transición entre vistas.
• Para dar sensación de continuidad.

Si la animación no aporta nada, probablemente sobra.

Accesibilidad: cuidado con el exceso de movimiento

Al hablar de transition CSS y animation CSS, es importante mencionar la accesibilidad. Algunas personas pueden experimentar molestias con animaciones intensas, movimientos bruscos, parpadeos o desplazamientos constantes.

CSS permite respetar la preferencia del usuario mediante prefers-reduced-motion.

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

Este patrón reduce drásticamente el movimiento para usuarios que así lo han configurado en su sistema.

@media (prefers-reduced-motion: reduce) {
  .decorative-shape {
    animation: none;
  }

  .button {
    transition: none;
  }
}

No se trata de eliminar todo el diseño, sino de ofrecer una experiencia más cómoda. Una buena animación no debería ser imprescindible para entender la interfaz.

Además del movimiento, conviene cuidar el contraste, la jerarquía visual y la legibilidad. Si estás trabajando esta parte en tus interfaces, puedes revisar la guía sobre contraste y tipografía en accesibilidad visual.

Buenas prácticas para usar transition y animation en CSS

Mantén las transiciones breves

Las transiciones de interfaz suelen funcionar bien entre 150ms y 300ms. Si son demasiado rápidas, apenas se perciben. Si son demasiado lentas, la interfaz parece pesada.

.button {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

Para cambios más complejos, como abrir un panel o mostrar un modal, puedes usar duraciones algo mayores, por ejemplo 300ms o 400ms.

Usa easing con intención

La función de tiempo cambia mucho la sensación del movimiento. ease suele funcionar bien para muchos casos, pero también puedes usar ease-in, ease-out, ease-in-out o cubic-bezier().

transition: transform 0.3s ease;

animation: fadeInUp 0.6s ease-out both;

Evita animaciones infinitas innecesarias

Las animaciones infinitas deben usarse con cuidado. Un loader tiene sentido porque comunica que algo está pasando. Pero un fondo lleno de elementos moviéndose sin parar puede distraer.

¿Este movimiento ayuda al usuario o solo decora?

Si solo decora, quizá deba ser muy sutil o no existir.

Nombra bien tus keyframes

Los nombres de @keyframes deberían describir la intención del movimiento.

@keyframes fadeInUp {}
@keyframes spin {}
@keyframes pulse {}
@keyframes slideInFromLeft {}

Evita nombres genéricos como animacion1, effect o move. Cuando el proyecto crece, los nombres claros facilitan mucho el mantenimiento.

Ejemplo final: usando transition y animation juntas

No siempre hay que elegir una u otra. De hecho, es muy común usar ambas en un mismo componente, cada una para una responsabilidad distinta.

Imaginemos una tarjeta que aparece al cargar y, además, tiene una interacción al hacer hover.

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.card {
  opacity: 0;
  transform: translateY(20px);
  animation: cardReveal 0.6s ease both;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

Aquí usamos animation para la entrada inicial y transition para la interacción posterior. La animación define cómo aparece la tarjeta; la transición suaviza cómo responde al usuario.

Este tipo de combinación es muy habitual en interfaces modernas. La clave está en no mezclar responsabilidades sin necesidad.

FAQs sobre transition vs animation CSS

¿Cuál es la principal diferencia entre transition y animation en CSS?

La principal diferencia es que transition anima el cambio entre dos estados, mientras que animation permite crear una secuencia de movimiento mediante @keyframes. Si quieres suavizar un hover, un focus o un cambio de clase, normalmente usarás transition. Si necesitas una animación con varios pasos, repetición o movimiento autónomo, usarás animation.

¿Es mejor usar transition o animation para mejorar el rendimiento?

No depende tanto de usar transition o animation, sino de qué propiedades estás animando. En general, transform y opacity suelen ser las opciones más recomendables para conseguir animaciones fluidas. En cambio, animar propiedades como width, height, top, left o margin puede ser más costoso porque afecta al layout.

¿Puedo usar transition y animation en el mismo elemento?

Sí, puedes usar ambas en el mismo elemento. Por ejemplo, puedes usar animation para que una tarjeta aparezca al cargar la página y transition para suavizar su comportamiento al hacer hover. Lo importante es que cada una tenga una función clara y que no entren en conflicto animando la misma propiedad al mismo tiempo.

Elegir bien el movimiento también es diseñar mejor

La diferencia entre transition y animation en CSS no es solo una cuestión técnica. También es una cuestión de diseño, experiencia de usuario y claridad de intención.

Una transition es perfecta cuando queremos que un cambio de estado se sienta más natural. Es directa, sencilla y muy útil para microinteracciones. Una animation, en cambio, nos da más control para crear secuencias, entradas, loaders, efectos decorativos o movimientos que se repiten.

La clave está en no elegir por costumbre. Antes de escribir CSS, conviene preguntarse qué queremos comunicar con ese movimiento. Si solo hay dos estados, probablemente una transición sea suficiente. Si hay una secuencia, varios pasos o repetición, entonces una animación será más adecuada.

En definitiva, transition y animation no compiten entre sí. Son herramientas complementarias. Usarlas bien permite crear interfaces más fluidas, más comprensibles y más agradables, sin caer en el exceso de movimiento ni complicar el código innecesariamente.