Crear una interfaz agradable no depende solo de elegir buenos colores, una tipografía legible o una estructura clara. También influye mucho cómo responde la web cuando una persona interactúa con ella. Un botón que cambia de estado de forma brusca puede sentirse rígido. En cambio, un botón que cambia de color o se desplaza ligeramente con suavidad transmite una sensación más cuidada y profesional.
Aquí es donde entra en juego transition, una de las propiedades más útiles de CSS para crear pequeñas animaciones entre dos estados. Con ella podemos suavizar cambios de color, movimientos, escalados, opacidades o sombras sin necesidad de utilizar JavaScript ni crear animaciones complejas con @keyframes.
Si estás empezando a trabajar con movimiento en interfaces, te recomiendo leer también esta guía sobre animaciones CSS desde cero, donde explico las bases para entender cuándo usar transition, cuándo usar animation y qué propiedades conviene animar.
En este artículo vamos a centrarnos en cómo crear animaciones suaves con transition, cómo escribir su sintaxis correctamente, qué errores evitar y cómo aplicarla en botones, enlaces, tarjetas, menús e imágenes.
Qué es transition en CSS
La propiedad transition permite que un cambio entre dos estados de un elemento no ocurra de golpe, sino de forma progresiva.
Por ejemplo, imagina un botón con un color de fondo rosa. Cuando pasas el cursor por encima, ese botón cambia a morado. Sin transición, el cambio es inmediato. Con transition, el navegador genera los estados intermedios y el cambio se percibe de manera más suave.
.button {
background-color: #cc2b5e;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #753a88;
}
En este ejemplo, el cambio de color tarda 0.3s y utiliza una curva de movimiento ease. Es un detalle pequeño, pero cambia mucho la percepción de la interfaz.
La idea principal es sencilla: transition suaviza el paso de un valor CSS a otro. No crea una animación compleja por sí sola, sino que anima un cambio que ya existe.
Por eso suele utilizarse en estados como:
:hover:focus:active- clases añadidas con JavaScript
- cambios visuales en componentes interactivos
Es una propiedad especialmente útil para microinteracciones: botones, enlaces, tarjetas, menús, iconos, tooltips o pequeños efectos visuales.
Diferencia entre transition y animation
Una duda muy habitual es cuándo conviene usar transition y cuándo es mejor usar animation.
Aunque ambas sirven para crear movimiento en CSS, no tienen el mismo propósito.
transition se utiliza cuando queremos animar el cambio entre dos estados. Por ejemplo, un botón en reposo y ese mismo botón en estado hover.
.card {
transform: translateY(0);
transition: transform 0.25s ease;
}
.card:hover {
transform: translateY(-6px);
}
Aquí solo hay dos estados: la tarjeta en su posición inicial y la tarjeta ligeramente elevada. Este es un caso perfecto para usar transition.
En cambio, animation se utiliza cuando necesitamos una secuencia más elaborada, varios pasos intermedios o una repetición. Por ejemplo, un loader girando, un icono latiendo en bucle o una animación de entrada con diferentes fases.
Regla práctica para elegir
Puedes quedarte con esta idea:
Si hay dos estados, usa transition.
Si hay una secuencia o repetición, usa animation.
Para un efecto hover, lo normal es usar transition. Para un loader infinito, probablemente usarás @keyframes y animation.
Esta diferencia es importante porque muchas veces se usa animation para resolver efectos que podrían hacerse de forma más simple, limpia y mantenible con transition.
Sintaxis de transition
La propiedad transition es una abreviatura que agrupa varias propiedades relacionadas con la transición.
Su sintaxis habitual es:
transition: propiedad duración función-de-tiempo retraso;
Por ejemplo:
transition: transform 0.3s ease-in-out 0s;
Este código indica que la propiedad transform debe cambiar durante 0.3s, con una curva ease-in-out y sin retraso.
También se puede escribir de forma separada:
.element {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
Ambas formas son correctas, pero en proyectos reales suele utilizarse la versión abreviada porque es más compacta y fácil de leer.
transition-property: qué propiedad se anima
transition-property indica qué propiedad CSS queremos animar.
transition-property: background-color;
También podemos animar varias propiedades separándolas con comas:
transition-property: background-color, transform;
Una opción muy común es usar all:
transition: all 0.3s ease;
Aunque puede parecer cómodo, conviene tener cuidado. all indica que cualquier propiedad que cambie será animada. Esto puede provocar resultados inesperados si más adelante modificas otras propiedades del elemento.
Por eso, en muchos casos es mejor indicar exactamente qué propiedades quieres animar:
transition: background-color 0.3s ease, transform 0.3s ease;
El código queda más claro, más predecible y más fácil de mantener.
transition-duration: cuánto dura la transición
transition-duration define cuánto tarda la transición en completarse. Puede expresarse en segundos o milisegundos.
transition-duration: 300ms;
O también:
transition-duration: 0.3s;
Para microinteracciones, como botones o enlaces, suelen funcionar bien valores entre 150ms y 300ms.
Si la transición es demasiado rápida, apenas se nota. Si es demasiado lenta, puede hacer que la interfaz se sienta pesada.
.button {
transition: background-color 180ms ease, transform 180ms ease;
}
Este tipo de duración suele funcionar muy bien para botones porque aporta suavidad sin hacer esperar a la persona usuaria.
transition-timing-function: cómo se mueve la transición
La función de tiempo define cómo progresa la transición durante su duración. Es decir, si empieza rápido, termina lento, mantiene velocidad constante o combina aceleración y desaceleración.
Algunos valores habituales son:
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
El valor ease suele funcionar bien en muchos casos. Sin embargo, para interfaces más cuidadas, ease-out y ease-in-out pueden dar una sensación más natural.
Por ejemplo:
.card {
transition: transform 0.25s ease-out;
}
ease-out hace que el movimiento empiece con más energía y termine suavemente. Es muy útil para tarjetas que se elevan, elementos que aparecen o pequeños desplazamientos.
transition-delay: retrasar el inicio
transition-delay permite retrasar el inicio de la transición.
transition-delay: 0.1s;
Puede ser útil cuando quieres crear un efecto escalonado, por ejemplo en una lista de elementos que aparecen de forma progresiva.
.item {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.item.is-visible {
opacity: 1;
transform: translateY(0);
}
El retraso puede aportar ritmo visual, pero conviene usarlo con moderación. Si todo tarda demasiado en responder, la experiencia puede sentirse lenta.
Cómo crear un hover suave con transition
Uno de los usos más habituales de transition es crear un hover suave en botones, enlaces o tarjetas.
Veamos un ejemplo sencillo:
.button {
display: inline-block;
padding: 0.85rem 1.4rem;
border-radius: 999px;
background-color: #cc2b5e;
color: #ffffff;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.button:hover {
background-color: #753a88;
transform: translateY(-2px);
}
Aquí ocurren dos cosas: cambia el color de fondo y el botón se desplaza ligeramente hacia arriba.
El resultado es una interacción sencilla, pero más fluida y agradable que un cambio instantáneo.
Añadir también el estado focus
Un error frecuente es diseñar solo el estado :hover y olvidarse de las personas que navegan con teclado.
Por eso, siempre que tenga sentido, conviene añadir también :focus-visible:
.button:hover,
.button:focus-visible {
background-color: #753a88;
transform: translateY(-2px);
}
Así el botón responde tanto al cursor como al foco de teclado. Es un pequeño detalle que mejora la accesibilidad y hace que la interfaz sea más coherente.
Si este tema te interesa, también puedes conectar este tipo de decisiones con el diseño de interacciones y prototipos. En esta guía sobre cómo pasar de wireframe a prototipo interactivo en Figma explico cómo pensar mejor los estados y flujos antes de llevarlos al código.
Propiedades recomendadas para animaciones suaves CSS
No todas las propiedades CSS se animan igual de bien. Algunas obligan al navegador a recalcular el layout de la página, mientras que otras son más eficientes.
Para conseguir animaciones suaves, normalmente conviene priorizar:
transformopacity
Con transform podemos mover, escalar, rotar o inclinar un elemento sin modificar directamente el flujo del documento.
.card:hover {
transform: scale(1.03);
}
Con opacity podemos crear efectos de aparición y desaparición:
.tooltip {
opacity: 0;
transition: opacity 0.2s ease;
}
.tooltip.is-visible {
opacity: 1;
}
Mejor transform que top, left o margin
Aunque se pueden animar propiedades como width, height, margin, padding, top o left, no siempre es recomendable. Estos cambios pueden afectar al layout y hacer que la animación sea menos fluida.
Por ejemplo, en lugar de mover un elemento con top:
.box:hover {
top: -10px;
}
es preferible usar transform:
.box:hover {
transform: translateY(-10px);
}
El resultado visual puede ser parecido, pero la segunda opción suele ser más estable y eficiente.
Ejemplos prácticos de CSS transitions
A continuación tienes varios ejemplos que puedes adaptar a tus propios proyectos.
Enlace con cambio de color suave
.link {
color: #cc2b5e;
text-decoration: none;
transition: color 0.2s ease;
}
.link:hover,
.link:focus-visible {
color: #753a88;
}
Este patrón funciona muy bien en enlaces dentro de artículos, menús o llamadas a la acción secundarias.
Tarjeta que se eleva al pasar el cursor
.card {
padding: 1.5rem;
border-radius: 1rem;
background-color: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(0);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}
Este efecto es muy útil en tarjetas de servicios, entradas destacadas del blog o proyectos de portfolio. La clave está en que el movimiento sea sutil. No hace falta desplazar mucho el elemento para que se entienda que es interactivo.
Imagen con zoom suave
.image-wrapper {
overflow: hidden;
border-radius: 1rem;
}
.image-wrapper img {
display: block;
width: 100%;
transition: transform 0.4s ease;
}
.image-wrapper:hover img {
transform: scale(1.06);
}
El contenedor tiene overflow: hidden para evitar que la imagen se salga visualmente al escalar. Es un recurso muy usado en galerías, cards de blog y proyectos visuales.
Menú desplegable con opacidad y desplazamiento
.dropdown {
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
Este ejemplo es útil cuando el estado del menú se controla con una clase, por ejemplo mediante JavaScript.
Si estás trabajando con rutas, navegación o enlaces internos en proyectos React, también puede interesarte esta guía sobre React Router Hash Link y enlaces ancla en React, donde el comportamiento de navegación puede combinarse con detalles visuales como el desplazamiento suave.
Buenas prácticas para usar transition
Una transición bien aplicada puede mejorar mucho la experiencia de usuario. Pero si se usa sin intención, también puede generar ruido o distracción.
Usa transiciones con un propósito
No todos los elementos necesitan moverse. La animación debe ayudar a entender mejor una acción, no convertirse en un adorno constante.
Antes de añadir una transición, pregúntate:
- ¿Ayuda a comprender mejor la interacción?
- ¿Hace que el cambio de estado sea más claro?
- ¿Refuerza la acción de la persona usuaria?
- ¿Puede resultar molesta si se repite muchas veces?
Una buena transición suele sentirse natural. Está ahí, mejora la experiencia, pero no roba protagonismo.
Mantén duraciones cortas
Para botones, enlaces e iconos, normalmente basta con una duración entre 150ms y 300ms.
Para elementos más grandes, como modales, paneles o menús desplegables, puedes usar valores algo mayores, como 300ms o 400ms.
.modal {
transition: opacity 0.3s ease, transform 0.3s ease;
}
La transición debe acompañar la experiencia, no ralentizarla.
Evita abusar de transition: all
Aunque transition: all parece una solución rápida, puede generar efectos inesperados.
transition: all 0.3s ease;
Es mejor indicar las propiedades concretas:
transition: background-color 0.3s ease, transform 0.3s ease;
Así el código es más explícito y fácil de mantener.
Respeta la preferencia de movimiento reducido
No todas las personas viven el movimiento en pantalla de la misma forma. Algunas pueden sentirse incómodas con animaciones excesivas.
Por eso conviene tener en cuenta prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
Esto reduce al mínimo las animaciones para quienes han indicado en su sistema que prefieren menos movimiento.
Errores comunes al usar transition
Aunque transition es sencilla, hay varios errores habituales que pueden hacer que no funcione como esperas.
Poner la transición solo en :hover
Este es uno de los errores más comunes:
.button:hover {
background-color: #753a88;
transition: background-color 0.3s ease;
}
El problema es que la transición solo se declara en el estado hover. Lo recomendable es definirla en el estado base:
.button {
background-color: #cc2b5e;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #753a88;
}
Así el navegador puede animar tanto la entrada como la salida del estado.
Intentar animar display
No se puede animar de forma fluida un cambio de display: none a display: block.
Esto no generará una transición suave:
.menu {
display: none;
transition: display 0.3s ease;
}
.menu.is-open {
display: block;
}
Una alternativa más adecuada es combinar opacity, transform, visibility y pointer-events:
.menu {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.menu.is-open {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
Crear movimientos demasiado exagerados
Una transición no tiene que ser espectacular para funcionar. De hecho, muchas veces cuanto más sutil, mejor.
Por ejemplo, una tarjeta que se desplaza 40px puede sentirse exagerada. En cambio, un desplazamiento de 4px, 6px u 8px suele ser suficiente.
.card:hover {
transform: translateY(-6px);
}
La suavidad no depende solo de la duración. También depende de la distancia, la curva de movimiento y el contexto.
Cómo combinar varias transiciones
Puedes aplicar varias transiciones a un mismo elemento separándolas con comas.
.button {
background-color: #cc2b5e;
color: #ffffff;
transform: translateY(0);
transition:
background-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.button:hover {
background-color: #753a88;
color: #ffffff;
transform: translateY(-2px);
}
También puedes usar duraciones diferentes para cada propiedad:
.card {
transition:
transform 0.25s ease-out,
box-shadow 0.35s ease;
}
En este caso, el movimiento de la tarjeta es un poco más rápido que el cambio de sombra. Son detalles pequeños, pero ayudan a que la interfaz se sienta más cuidada.
Cómo organizar tus transiciones en proyectos reales
Cuando una web crece, no conviene escribir duraciones y curvas distintas en cada componente sin ningún criterio. Lo ideal es crear cierta coherencia visual.
Una buena práctica es definir variables CSS:
:root {
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
}
Después puedes reutilizarlas:
.button {
transition: background-color var(--transition-base), transform var(--transition-base);
}
Esto ayuda a mantener una experiencia consistente en toda la interfaz.
También puedes crear utilidades reutilizables:
.u-transition {
transition: transform 0.25s ease, opacity 0.25s ease;
}
Eso sí, conviene no abusar de clases genéricas si estás trabajando con componentes muy específicos. Lo importante es que el sistema sea claro y fácil de mantener.
Si además estás guardando preferencias visuales en el navegador, como modo claro, modo oscuro o estados personalizados, puedes complementar este tema con el artículo sobre cómo usar localStorage y sessionStorage en proyectos JavaScript.
Preguntas frecuentes sobre transition CSS
¿Qué es transition en CSS?
transition es una propiedad de CSS que permite suavizar el cambio entre dos estados de un elemento. Por ejemplo, puede hacer que un botón cambie de color de forma progresiva al pasar el cursor por encima.
Se utiliza mucho para crear animaciones suaves en botones, enlaces, tarjetas, menús, imágenes y otros elementos interactivos.
¿Cuál es la diferencia entre transition y animation?
transition sirve para animar el cambio entre dos estados, como normal y hover. animation, en cambio, permite crear secuencias más complejas mediante @keyframes, repeticiones o varios pasos intermedios.
Si necesitas suavizar un cambio simple, usa transition. Si necesitas una secuencia, usa animation.
¿Qué propiedades conviene animar para conseguir transiciones suaves?
Las propiedades más recomendadas suelen ser transform y opacity, porque permiten crear efectos visuales fluidos sin modificar directamente el layout.
Por ejemplo, para mover un elemento es mejor usar transform: translateY() que cambiar top o margin. Para mostrar u ocultar algo suavemente, suele ser mejor usar opacity que intentar animar display.
Cuando una pequeña transición mejora toda la experiencia
Crear animaciones suaves con transition no consiste en llenar una web de efectos. Consiste en diseñar cambios de estado que ayuden a entender mejor lo que ocurre en la interfaz.
Un botón que responde con suavidad confirma una acción. Una tarjeta que se eleva ligeramente indica que puede interactuarse con ella. Un menú que aparece de forma gradual evita una sensación brusca. Un enlace que cambia de color de manera fluida hace que la navegación se sienta más cuidada.
La clave está en usar transition CSS con intención: elegir bien qué propiedad animar, cuánto debe durar, qué curva de movimiento encaja mejor y cómo afecta esa decisión a la accesibilidad y al rendimiento.
En definitiva, las CSS transitions son una herramienta sencilla, potente y muy útil para mejorar la calidad percibida de una web. No necesitas crear grandes efectos para que una interfaz se sienta más profesional. A veces, una transición de 200ms, aplicada en el lugar adecuado, marca la diferencia entre una experiencia rígida y una experiencia fluida, clara y agradable.