Las transiciones en CSS te permiten suavizar los cambios visuales entre estados, evitando que el cambio de color, tamaño o posición se sienta abrupto cuando un usuario interactúa con un botón u otro elemento. Aprenderás a animar propiedades como background-color, transform y a controlar la velocidad con funciones de tiempo como linear, ease y ease-in-out, ideales para quienes ya dominan los estilos base de CSS y quieren mejorar la experiencia de interacción.

¿Cómo se crea una transición de color en un botón con CSS?

La idea es que cuando pases el cursor sobre un botón, el color de fondo cambie de forma fluida en lugar de saltar de golpe. Para lograrlo, defines la propiedad transition sobre el estado base del botón, no sobre el :hover.

En el botón base aplicas estilos generales: un padding de 12px arriba y abajo y 24px a los lados, un font-size de 16px o 1rem, eliminas el borde por defecto, agregas cursor: pointer y un background-color azul #3498db con texto blanco para contraste.

Luego defines la transición sobre la propiedad que va a cambiar:

css .button--color { transition: background-color 0.3s ease; } .button--color:hover { background-color: #E74C3C; }

¿Dónde se coloca la propiedad transition, en el estado base o en el hover? Siempre en el estado base del elemento. La transición describe cómo se anima el cambio, mientras que el :hover solo dispara el nuevo valor [03:15].

¿Cómo hacer que un botón crezca al pasar el cursor?

Para animar el tamaño usas la propiedad transform junto con scale. Esto te permite agrandar el botón sin afectar el flujo del documento, porque transform no recalcula el espacio que ocupa el elemento.

La estructura es la misma que con el color: defines la transición sobre transform en el estado base y aplicas la transformación en el :hover.

css .button--size { transition: transform 0.3s ease; } .button--size:hover { transform: scale(1.1); }

El valor 1.1 significa que el botón crecerá un 10% respecto a su tamaño original. Es un cambio sutil que se percibe como una respuesta visual elegante a la interacción [05:20].

¿Por qué no puedo combinar dos transform en el mismo selector?

Cuando intentas aplicar varias transformaciones, surge una limitación importante: un mismo elemento no puede tener dos declaraciones transform separadas activas al mismo tiempo. La segunda pisa a la primera por la cascada de CSS.

La solución es agruparlas en una sola declaración:

css transform: translateY(-5px) scale(1.1);

Usando las herramientas del inspector del navegador puedes activar manualmente el estado :hover y verificar qué reglas se están aplicando o tachando, lo que te ayuda a depurar este tipo de conflictos [08:45].

¿Cómo combinar varias transiciones en un solo botón?

Cuando quieres animar más de una propiedad a la vez (color, posición, sombra y escala), usas transition: all para que la transición aplique a cualquier propiedad que cambie en el estado interactivo.

css .button--all { transition: all 0.3s ease; } .button--all:hover { background-color: #2ECC71; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: scale(1.1); }

La box-shadow con valores 0 5px 15px rgba(0,0,0,0.3) aporta el efecto de elevación, simulando que el botón flota sobre la superficie cuando el cursor está encima. Combinado con el cambio de color verde y el escalado, el botón se siente vivo y reactivo [10:30].

¿Qué hace transition: all en CSS? Aplica la animación a todas las propiedades que cambien entre estados, en lugar de listar cada una. Es útil cuando hay múltiples cambios simultáneos.

¿Qué diferencia hay entre linear, ease y ease-in-out?

Las funciones de tiempo definen cómo se distribuye la velocidad durante la transición. No es lo mismo un movimiento mecánico que uno que imita la aceleración natural de un objeto físico.

• linear: la velocidad es uniforme de principio a fin. Útil para animaciones técnicas o repetitivas donde no quieres énfasis en ningún tramo.
• ease: empieza lento y acelera. Es el valor por defecto y se siente como un movimiento natural [13:40].
• ease-in-out: arranca suave, va rápido en el medio y termina suave. Aporta una sensación pulida en transiciones más largas.

Para probarlas, puedes crear tres cajas con la misma clase .box y aplicar una función de tiempo distinta a cada una:

css .timing-linear { transition: transform 1s linear; } .timing-ease { transition: transform 1s ease; } .timing-ease-in-out { transition: transform 1s ease-in-out; } .box:hover { transform: translateX(200px); }

Cada caja se desplaza 200px hacia la derecha al hacer :hover, pero la sensación del movimiento cambia según la función elegida. Cuando los tiempos son cortos la diferencia es sutil, así que si quieres notar el contraste mejor, sube la duración a 1 o 2 segundos [15:50].

¿Cómo se aplica un hover compartido a varios elementos?

Si varios elementos comparten una clase como .box, defines un único selector .box:hover con la transformación común. Cada elemento mantiene su propia función de tiempo gracias a sus clases específicas, pero todos reaccionan al mismo gesto del usuario.

Este patrón es útil cuando construyes galerías, tarjetas o grupos de botones donde quieres consistencia en el comportamiento pero variedad en el ritmo de la animación.

¿Cuál de estas funciones de tiempo se siente mejor en tus proyectos? Cuéntame en los comentarios qué transiciones has implementado y qué efecto buscabas lograr.