Las animaciones CSS son una de esas herramientas que pueden transformar una interfaz sencilla en una experiencia más clara, fluida y agradable. Pero también pueden convertirse en ruido visual si se usan sin intención. Por eso, antes de empezar a añadir movimiento a botones, tarjetas, menús o ilustraciones, conviene entender algo importante: animar con CSS no consiste en decorar por decorar, sino en acompañar al usuario.

Una buena animación puede ayudar a explicar qué está pasando en una interfaz. Puede indicar que un botón es interactivo, que un menú se ha abierto, que una tarjeta ha cambiado de estado o que una acción se ha completado correctamente. En cambio, una animación excesiva, lenta o mal planteada puede aumentar la carga cognitiva, distraer y empeorar la experiencia.

En esta guía básica sobre animaciones CSS vamos a ver desde cero qué son, cuándo usarlas, qué diferencia hay entre transition y animation, cómo funcionan los @keyframes, qué propiedades conviene animar y qué buenas prácticas deberías tener presentes si quieres crear animaciones web útiles, accesibles y mantenibles.

La idea de este artículo es que funcione como un post pilar: una página central desde la que puedas entender los conceptos principales y, después, profundizar en temas concretos como microinteracciones, efectos hover, menús animados, loaders, animaciones accesibles o ilustraciones CSS más complejas. Si también te interesa la parte más visual del CSS, puedes complementar esta guía con el artículo sobre cómo dibujar formas básicas con CSS.

Qué son las animaciones CSS

Las animaciones CSS permiten modificar visualmente uno o varios estilos de un elemento a lo largo del tiempo. En lugar de que un cambio ocurra de forma brusca, puedes hacer que ese cambio sea progresivo.

Por ejemplo, imagina un botón que cambia de color cuando pasas el ratón por encima. Sin animación, el color cambia de golpe. Con una transición, ese cambio puede hacerse de forma suave:

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

.button:hover {
  background-color: #753a88;
}

Este pequeño detalle ya mejora la percepción de la interfaz. El usuario siente que el elemento responde de forma más natural.

CSS permite crear movimiento principalmente de dos formas: mediante transiciones y mediante animaciones con @keyframes. Las transiciones sirven para animar el cambio entre dos estados de un elemento, por ejemplo un estado normal y un estado :hover. Las animaciones con @keyframes, en cambio, permiten definir varios pasos intermedios dentro de una secuencia más controlada.

Por qué usar animaciones CSS en una web

Las animaciones no deberían estar ahí solo porque “quedan bonitas”. En diseño de interfaces, el movimiento tiene sentido cuando ayuda a comunicar mejor.

Una animación puede cumplir varias funciones dentro de una web:

• Dar feedback visual.
• Guiar la atención del usuario.
• Explicar una relación entre elementos.
• Suavizar cambios de estado.
• Hacer que una interfaz se sienta más cuidada.
• Reforzar la personalidad visual de una marca.

Por ejemplo, una tarjeta que se eleva ligeramente al pasar el cursor comunica que es clicable. Un panel que aparece desde un lateral ayuda a entender de dónde viene ese contenido. Un icono que gira al abrir un acordeón indica que algo ha cambiado de estado.

Ahora bien, también hay que tener cuidado. Si todo se mueve, nada destaca. Una web llena de efectos puede generar cansancio visual y hacer que el usuario tarde más en decidir qué hacer. Aquí conviene pensar en algo muy relacionado con la experiencia de usuario: la diferencia entre captar la atención y aumentar la carga cognitiva. Una animación útil reduce fricción. Una animación innecesaria puede añadir ruido.

Si quieres profundizar más en cómo las decisiones visuales afectan a la comprensión de una interfaz, te puede interesar el artículo sobre HTML semántico y accesibilidad web, porque muchas veces la claridad de una interfaz empieza mucho antes de añadir movimiento.

Transiciones CSS: el primer paso para animar con CSS

Las transiciones CSS son la forma más sencilla de empezar a animar con CSS. Sirven para suavizar el cambio entre dos valores de una propiedad.

Cómo funciona una transición

Una transición necesita, como mínimo, dos cosas: una propiedad que vaya a cambiar y una duración para ese cambio.

.card {
  transform: translateY(0);
  transition: transform 0.25s ease;
}

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

Aquí estamos diciendo que la tarjeta parte de su posición original y, cuando el usuario pasa el cursor por encima, se desplaza ligeramente hacia arriba. Ese cambio no sucede de golpe, sino durante 0.25s.

La propiedad transition es una forma abreviada de declarar varias cosas a la vez: qué propiedad se anima, cuánto dura, qué curva de aceleración utiliza y si tiene retraso.

Propiedades principales de transition

Cuando trabajes con transiciones, estas son las propiedades que más vas a utilizar:

.element {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

También puedes escribirlo de forma abreviada:

.element {
  transition: transform 0.3s ease 0s;
}

La propiedad transition-property indica qué propiedad se va a animar. transition-duration define la duración. transition-timing-function controla el ritmo de la animación. Y transition-delay permite retrasar el inicio.

Cuándo usar transition

Usa transition cuando quieras animar un cambio sencillo entre dos estados. Es ideal para efectos :hover, estados :focus, botones, tarjetas, enlaces, cambios de color, cambios de opacidad o pequeños desplazamientos.

.link {
  color: #020101;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.link:hover {
  color: #cc2b5e;
  text-decoration-thickness: 3px;
}

Este tipo de microinteracción puede mejorar mucho la experiencia sin añadir complejidad. Además, es una buena puerta de entrada si estás empezando a animar con CSS.

Animaciones CSS con @keyframes

Cuando necesitas más control que una simple transición, entran en juego las animaciones con @keyframes.

Una animación CSS se compone de dos partes principales: una regla @keyframes, donde defines los pasos de la animación, y una propiedad animation, donde aplicas esa animación a un elemento.

Qué es @keyframes

La regla @keyframes define cómo cambia un elemento durante una animación. Puedes usar from y to, o porcentajes como 0%, 50% y 100%.

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

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

.hero-title {
  animation: fadeIn 0.6s ease-out both;
}

En este caso, el título aparece progresivamente y sube ligeramente desde abajo. Es una animación típica para introducir contenido en pantalla.

Diferencia entre from/to y porcentajes

Puedes escribir una animación sencilla así:

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

Pero si necesitas más control, puedes usar porcentajes:

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

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

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

Los porcentajes permiten definir puntos intermedios. Esto es útil para animaciones más elaboradas, como rebotes, loaders, entradas escalonadas o pequeños efectos decorativos.

Propiedades principales de animation

La propiedad animation también puede escribirse de forma abreviada. Agrupa propiedades como animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode y animation-play-state.

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

Aquí estamos diciendo que el elemento usará la animación pulse, durará 1.5s, tendrá una curva ease-in-out y se repetirá infinitamente.

La versión extendida sería:

.badge {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

Transition vs animation: cuándo usar cada una

Una de las dudas más habituales al empezar con CSS animation es cuándo usar transition y cuándo usar animation.

Usa transition cuando hay un cambio de estado

Las transiciones son perfectas cuando el elemento cambia como respuesta a una interacción o a una clase añadida con JavaScript.

.menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

Aquí el menú cambia entre cerrado y abierto. La transición suaviza ese cambio.

Usa animation cuando necesitas una secuencia propia

Las animaciones con @keyframes son más adecuadas cuando el movimiento tiene una secuencia definida que no depende únicamente de un cambio entre dos estados.

Por ejemplo, usarías animation para crear un loader, un icono que pulsa, una ilustración animada, una entrada de contenido o una animación que se repite.

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

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

En resumen: si solo necesitas suavizar un cambio, usa transition; si necesitas definir una secuencia, usa animation y @keyframes.

Propiedades recomendadas para animar

No todas las propiedades CSS se comportan igual cuando las animas. Algunas son más eficientes y otras pueden afectar al rendimiento de la página.

Prioriza transform y opacity

Cuando sea posible, conviene animar transform y opacity. Son dos propiedades especialmente útiles porque permiten crear muchos efectos visuales sin obligar al navegador a recalcular constantemente la estructura de la página.

.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Con transform puedes crear desplazamientos, escalados, rotaciones e inclinaciones:

.box:hover {
  transform: translateY(-6px) scale(1.02);
}

Con opacity puedes crear apariciones y desapariciones suaves:

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip.is-visible {
  opacity: 1;
}

Evita animar propiedades costosas

Siempre que puedas, evita animar propiedades como width, height, top, left, margin o padding. No significa que estén prohibidas, pero sí que deberías usarlas con cuidado.

Por ejemplo, en lugar de animar top, suele ser mejor animar transform: translateY().

Menos recomendable:

.modal {
  top: -40px;
  transition: top 0.3s ease;
}

.modal.is-open {
  top: 0;
}

Mejor:

.modal {
  transform: translateY(-40px);
  transition: transform 0.3s ease;
}

.modal.is-open {
  transform: translateY(0);
}

Visualmente el resultado puede ser parecido, pero la segunda opción suele ser más eficiente y más fácil de mantener.

Curvas de animación: el papel del easing

La duración de una animación importa, pero el ritmo también. Ahí entra en juego el concepto de easing, que define cómo progresa la animación a lo largo del tiempo.

No es lo mismo una animación completamente lineal que una animación que empieza despacio, acelera y termina suavemente.

Valores habituales de timing-function

Algunos valores comunes son:

.element {
  transition-timing-function: ease;
}

.element {
  transition-timing-function: linear;
}

.element {
  transition-timing-function: ease-in;
}

.element {
  transition-timing-function: ease-out;
}

.element {
  transition-timing-function: ease-in-out;
}

Cuándo usar cada curva

Para interfaces, ease y ease-out suelen funcionar bien en muchas situaciones porque hacen que el movimiento se sienta más natural.

• linear: útil para loaders o rotaciones constantes.
• ease: buena opción general.
• ease-in: empieza lento y termina más rápido.
• ease-out: empieza rápido y termina suave.
• ease-in-out: suaviza tanto la entrada como la salida.

.toast {
  animation: slideIn 0.35s ease-out both;
}

En una notificación, ease-out suele tener sentido porque queremos que aparezca con cierta agilidad y se asiente de forma suave.

Ejemplos básicos de animaciones CSS

Veamos algunos ejemplos prácticos que puedes usar como punto de partida. La idea no es copiar y pegar sin pensar, sino entender el patrón para adaptarlo después a tus propios componentes.

Botón con hover suave

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: #cc2b5e;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

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

Este patrón es sencillo, pero muy útil. El botón responde visualmente sin resultar exagerado.

Tarjeta que aparece al cargar

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

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

.card {
  animation: cardEnter 0.5s ease-out both;
}

Aquí usamos both para que el elemento conserve los estilos del primer y último fotograma cuando corresponda.

Loader circular

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

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

En este caso, linear tiene sentido porque queremos una rotación constante.

Aparición escalonada de elementos

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

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

.list-item {
  animation: fadeUp 0.45s ease-out both;
}

.list-item:nth-child(2) {
  animation-delay: 0.1s;
}

.list-item:nth-child(3) {
  animation-delay: 0.2s;
}

.list-item:nth-child(4) {
  animation-delay: 0.3s;
}

Este recurso es útil para listas, grids de tarjetas o bloques de contenido. Eso sí: úsalo con moderación. Si una página tiene muchos elementos y todos aparecen con retraso, la experiencia puede volverse lenta.

Si estás trabajando con ilustraciones CSS, este tipo de animaciones también puede combinarse con técnicas como pseudo-elementos o recortes visuales. En ese caso, puedes ampliar el tema con el artículo sobre pseudo-elementos en CSS o con la guía sobre clip-path en CSS.

Accesibilidad en animaciones CSS

La accesibilidad es un punto fundamental cuando hablamos de animaciones web. No todas las personas perciben el movimiento de la misma manera. Para algunos usuarios, ciertas animaciones pueden provocar mareo, incomodidad o dificultad para concentrarse.

Por eso, CSS ofrece la media feature prefers-reduced-motion, que permite detectar si una persona ha activado en su sistema una preferencia para reducir el movimiento no esencial.

Cómo usar prefers-reduced-motion

Una forma habitual de aplicarlo es reducir o eliminar animaciones cuando el usuario ha indicado esa preferencia:

@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 es bastante global. En proyectos reales, también puedes crear alternativas más cuidadas en lugar de eliminar todo de golpe.

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

  .card:hover {
    transform: none;
  }
}

Animar no debería bloquear la comprensión

Una animación accesible debería cumplir estas ideas:

• No debe ser imprescindible para entender el contenido.
• No debe impedir usar la interfaz.
• No debe ejecutarse de forma infinita sin motivo.
• No debe parpadear agresivamente.
• No debe generar desplazamientos inesperados.
• Debe poder reducirse si el usuario lo necesita.

Una buena regla práctica es esta: si quitas la animación, la interfaz debería seguir funcionando y entendiéndose perfectamente.

También es importante no olvidar los estados de teclado. Si una animación acompaña el estado :hover, muchas veces debería contemplar también :focus-visible. Puedes profundizar en esta parte en el artículo sobre focus visible y navegación con teclado.

Buenas prácticas para crear animaciones CSS

Crear buenas animaciones no depende solo de saber escribir @keyframes. También implica criterio visual, intención de diseño y cuidado técnico.

1. Empieza con movimientos pequeños

Cuando estás empezando, es fácil pasarse. Una tarjeta no necesita volar por la pantalla para comunicar que es interactiva. A menudo basta con un pequeño cambio de opacidad, color o posición.

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

Un movimiento pequeño suele sentirse más elegante y menos invasivo.

2. Usa duraciones cortas

En interfaces, muchas animaciones funcionan bien entre 150ms y 400ms. No es una regla absoluta, pero sí un buen punto de partida.

• Microinteracciones: 150ms–250ms.
• Entradas de elementos: 300ms–500ms.
• Animaciones decorativas: depende del caso, pero conviene usarlas con cuidado.

Una animación demasiado rápida puede pasar desapercibida. Una demasiado lenta puede hacer que la web parezca pesada.

3. Mantén consistencia

Si cada botón, tarjeta y modal usa una duración diferente, la interfaz puede sentirse caótica. Es mejor definir un pequeño sistema de tiempos:

:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-base: ease;
}

Y después reutilizarlo:

.button {
  transition: transform var(--duration-base) var(--ease-base);
}

Esto ayuda a que el proyecto sea más mantenible.

4. No animes todo

Una web con demasiadas animaciones puede parecer menos profesional. El movimiento debe tener jerarquía. Antes de añadir una animación, pregúntate si ayuda a entender algo, si aporta feedback, si guía la atención o si simplemente está ahí porque se puede hacer.

Si no cumple ninguna función clara, probablemente sobra.

Errores comunes al empezar con CSS animation

Cuando empiezas a trabajar con CSS animation, es normal cometer algunos errores. Lo importante es detectarlos pronto para que las animaciones no perjudiquen la experiencia.

Animar propiedades equivocadas

Uno de los errores más frecuentes es animar propiedades que afectan al layout cuando podrías usar transform.

Menos recomendable:

.box:hover {
  width: 120%;
}

Mejor:

.box:hover {
  transform: scale(1.05);
}

Usar infinite sin necesidad

Las animaciones infinitas deben reservarse para casos concretos, como loaders o pequeños indicadores de actividad. Si un elemento decorativo se mueve todo el tiempo, puede distraer mucho.

.icon {
  animation: pulse 1s infinite;
}

Antes de usar algo así, pregúntate si realmente necesita repetirse siempre.

Crear animaciones demasiado largas

Una animación larga puede parecer elegante en una demo, pero molesta en una interfaz real. El usuario no quiere esperar a que la web termine de “presentarse” para poder interactuar.

Olvidar el estado focus

Muchas veces se anima :hover, pero se olvida :focus-visible. Esto deja fuera a quienes navegan con teclado.

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

Las animaciones también deben acompañar la accesibilidad de la interacción, no solo el uso con ratón.

Cómo organizar animaciones CSS en un proyecto real

Cuando un proyecto crece, conviene evitar animaciones sueltas y repetidas por todo el CSS. Puedes crear una pequeña arquitectura de movimiento para que todo sea más coherente.

Variables para tiempos y curvas

:root {
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;

  --motion-ease-standard: ease;
  --motion-ease-enter: ease-out;
  --motion-ease-exit: ease-in;
}

Clases reutilizables

.animate-fade-up {
  animation: fadeUp var(--motion-duration-slow) var(--motion-ease-enter) both;
}

.transition-base {
  transition-duration: var(--motion-duration-base);
  transition-timing-function: var(--motion-ease-standard);
}

Keyframes centralizados

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

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

Este enfoque hace que las animaciones sean más coherentes y fáciles de ajustar. Si más adelante decides que las entradas son demasiado lentas, puedes cambiar una variable en lugar de revisar decenas de componentes.

Una nota sobre diseño responsive

También conviene probar las animaciones en distintos tamaños de pantalla. Un desplazamiento que se ve sutil en escritorio puede sentirse excesivo en móvil. Si trabajas mucho con composición visual en CSS, te recomiendo revisar también el artículo sobre cómo adaptar ilustraciones CSS a distintos tamaños de pantalla.

Animaciones CSS como parte de una estrategia de contenidos

Este artículo está pensado como una guía base sobre animaciones CSS, pero el tema da para mucho más. Por eso tiene sentido usarlo como página central de un cluster de contenidos.

Desde aquí puedes enlazar, por ejemplo, a artículos más específicos sobre:

• Cómo usar transition en CSS.
• Cómo crear animaciones con @keyframes.
• Efectos hover modernos con CSS.
• Animaciones CSS para botones.
• Cómo animar menús responsive.
• Loaders CSS sin JavaScript.
• Animaciones accesibles con prefers-reduced-motion.
• Errores de rendimiento al animar con CSS.
• Microinteracciones CSS para mejorar la UX.
• Diferencias entre animaciones CSS y animaciones JavaScript.

Esta estructura ayuda tanto al usuario como al SEO. El usuario encuentra una ruta de aprendizaje clara. Y Google puede entender mejor la relación semántica entre los artículos del sitio.

Un post pilar no debería intentar resolver todos los temas con profundidad extrema. Su función es ordenar el mapa, explicar los conceptos base y derivar hacia contenidos complementarios más concretos.

Preguntas frecuentes sobre animaciones CSS

¿Qué diferencia hay entre transition y animation en CSS?

transition sirve para suavizar el cambio entre dos estados de un elemento, por ejemplo cuando un botón pasa de su estado normal a :hover. animation, en cambio, permite crear una secuencia más completa mediante @keyframes, con pasos intermedios, repeticiones, retrasos y mayor control.

¿Qué propiedades CSS conviene animar?

Siempre que sea posible, conviene animar transform y opacity, porque suelen ser más eficientes para el navegador. Con transform puedes crear desplazamientos, escalados y rotaciones. Con opacity puedes controlar apariciones y desapariciones suaves.

¿Las animaciones CSS son mejores que las animaciones con JavaScript?

No siempre. Las animaciones CSS son ideales para microinteracciones, transiciones sencillas, loaders básicos y efectos visuales ligados a estilos. JavaScript puede ser más adecuado cuando necesitas controlar una animación de forma dinámica, responder a eventos complejos, sincronizar estados o crear interacciones avanzadas. La mejor opción depende del problema que quieras resolver.

Movimiento con intención

Las animaciones CSS son una herramienta poderosa, pero su valor no está en el movimiento por sí mismo. Su valor está en cómo ese movimiento ayuda a que una interfaz se entienda mejor.

Una buena animación no interrumpe. No compite con el contenido. No obliga al usuario a esperar. Simplemente acompaña: guía la mirada, suaviza los cambios, refuerza la interacción y hace que la experiencia se sienta más cuidada.

Si estás empezando desde cero, no necesitas memorizar todas las propiedades de golpe. Empieza con transition, practica con transform y opacity, crea tus primeros @keyframes y observa cómo cambia la percepción de una interfaz cuando el movimiento tiene intención.

Animar con CSS no es añadir efectos porque sí. Es tomar decisiones pequeñas, pero importantes, sobre cómo se comporta una web. Y cuando esas decisiones están bien pensadas, las animaciones dejan de ser un adorno para convertirse en parte de la experiencia de usuario.