Transiciones en CSS

Transiciones en CSS: Cómo lograr cambios suaves en tus estilos

Cuando aplicamos estilos en CSS, los cambios normalmente ocurren de forma inmediata. Por ejemplo, si cambias el color de un elemento al pasar el cursor, ese cambio se hace de golpe. Para evitar esa brusquedad y crear una experiencia más fluida, CSS nos permite utilizar transiciones, que suavizan la modificación de propiedades visuales a lo largo del tiempo.

---

¿Qué es una transición?

Una transición en CSS define cómo se produce el cambio entre dos estados visuales de un elemento. Por ejemplo, si un botón tiene un fondo rojo en reposo y se vuelve azul al pasar el mouse, CSS puede animar ese cambio para hacerlo más gradual.

En cualquier animación basada en transiciones existen dos elementos clave:

• Estado inicial: El valor original de una propiedad (por ejemplo, background: red).
• Estado final: El valor nuevo después de un evento (por ejemplo, background: blue).

La transición es el proceso que conecta ambos estados.

---

Ejemplo básico sin transición

cssCopiarEditar.element {
  width: 100px;
  height: 100px;
  background: red;
}

.element:hover {
  background: blue;
}

Aquí, el color cambia bruscamente al pasar el cursor.

---

Ejemplo con transición suave

cssCopiarEditar.element {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 2s;
}

.element:hover {
  background: blue;
}

Con la propiedad transition, el color cambiará suavemente durante dos segundos.

---

Transiciones de entrada y salida

Las transiciones pueden comportarse de forma diferente cuando se activa o desactiva una condición. Por ejemplo:

• Entrada: cuando el cursor entra al área del elemento.
• Salida: cuando el cursor se retira.

Solo transición al entrar

cssCopiarEditar.element {
  background: red;
}

.element:hover {
  background: blue;
  transition: background 2s;
}

Aquí, el cambio se anima solo al pasar el cursor. Al salir, el color vuelve de forma inmediata.

Solo transición al salir

cssCopiarEditar.element {
  background: red;
  transition: background 2s;
}

.element:hover {
  background: blue;
}

Este ejemplo crea una transición suave al quitar el cursor, pero el cambio al entrar ocurre de golpe.

---

Diferentes tiempos por propiedad

También puedes especificar transiciones distintas para cada propiedad:

cssCopiarEditar.element {
  width: 200px;
  background: grey;
  transition:
    width 4s,
    background 1s;
}

.element:hover {
  width: 400px;
  background: deeppink;
}

En este caso, el ancho se anima lentamente en 4 segundos, mientras que el color de fondo cambia más rápido, en solo 1 segundo.

---

Activadores de transición

La transición no ocurre sola; necesita un evento. Aquí algunos desencadenantes comunes:

Selector	Descripción
:hover	Cuando el cursor pasa sobre el elemento.
:active	Mientras el usuario mantiene presionado el clic.
:focus	Cuando el elemento obtiene foco (ej. un input).

También puedes usar clases dinámicamente con JavaScript:

cssCopiarEditar.element {
  background: grey;
  transition: all 2s;
}

.element.light {
  background: gold;
  box-shadow: 0 0 25px gold;
}

Y en JavaScript:

jsCopiarEditardocument.querySelector('.element').classList.toggle('light');

---

Atajo con transition

Puedes utilizar transition: all para aplicar una transición general a cualquier propiedad que cambie:

cssCopiarEditar.element {
  transition: all 0.5s ease-in-out;
}

---

Conclusión

Las transiciones en CSS permiten que los cambios visuales se vean más naturales, mejorando tanto la estética como la experiencia del usuario. Ya sea para suavizar un color, mover un botón o ampliar un elemento, el uso de transiciones aporta profesionalismo a tu diseño sin necesidad de JavaScript avanzado.