¿Qué son las transiciones CSS?

Una transición CSS es un proceso que permite que una propiedad CSS cambie de un estado inicial a uno final de forma gradual, controlando la duración, el tipo de curva de velocidad y el retardo. A diferencia de las animaciones (@keyframes), las transiciones se activan en respuesta a un evento (por ejemplo, :hover, :focus o cambios de clase mediante JavaScript).

Esta característica está soportada por todos los navegadores modernos y es esencial para crear experiencias de usuario (UX) fluidas.

Sintaxis básica

La regla transition se escribe como una lista de valores o como una lista de sub‑propiedades:

/* Forma larga */
selector {
  transition-property: all;      /* o nombre de la propiedad */
  transition-duration: 300ms;   /* tiempo de la transición */
  transition-timing-function: ease-in-out; /* curva de velocidad */
  transition-delay: 0s;         /* retardo opcional */
}
/* Forma abreviada */
selector {
  transition: property duration timing-function delay;
}

Ejemplo práctico:

.boton {
  background-color: #0069d9;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.35rem;
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.boton:hover {
  background-color: #0053a6;
  transform: translateY(-3px);
}

Propiedades clave de transition

Ejemplos reales y casos de uso

1. Botones con feedback visual

.cta {
  background: #28a745;
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: .3rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: background .2s ease, box-shadow .2s ease;
}
.cta:hover {
  background: #218838;
  box-shadow: 0 6px 10px rgba(0,0,0,.15);
}

2. Tarjetas de producto con efecto "lift"

.card {
  border: 1px solid #e0e0e0;
  border-radius: .5rem;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.25,.8,.25,1),
              box-shadow .3s cubic-bezier(.25,.8,.25,1);
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0,0,0,.12);
}

3. Menús desplegables con retardo

.nav-item {
  position: relative;
}
.submenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav-item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

Comparativa: Transiciones vs. Animaciones CSS vs. JavaScript (GSAP, Anime.js)

Mejores prácticas y performance

• Animar solo propiedades que el compositor del navegador pueda acelerar: opacity, transform, filter. Evita width, height o margin que provocan re‑flow.
• Usar will-change con moderación: indica al motor que una propiedad será animada, pero no sobrecargues el árbol de renderizado.
• Respetar prefers-reduced-motion:

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
  }
  

• Definir transiciones explícitas en el estado base: evita que el navegador calcule tiempos al volar.
• Limitar la cantidad de transiciones simultáneas: demasiados elementos con transition pueden saturar la GPU.

Depuración y troubleshooting

Si una transición no se ejecuta:

1. Verifica que la propiedad esté incluida en transition-property (o que no sea none).
2. Comprueba que el elemento cambie efectivamente de estado (p. ej., la clase se añade).
3. Revisa la cascada: una regla posterior con transition: none puede sobrescribir la anterior.
4. Utiliza las herramientas de Chrome/Firefox → "Elements" → "Styles" para observar los valores calculados.
5. En caso de conflictos con JavaScript, asegúrate de que no se estén anulando los estilos en línea.

Compatibilidad y soporte

Las transiciones están soportadas en todos los navegadores modernos (Chrome ≥ 26, Firefox ≥ 16, Edge ≥ 12, Safari ≥ 6). Los prefijos -webkit- ya no son necesarios en la mayoría de los casos, pero pueden añadirse para versiones muy antiguas.

/* Compatibilidad retroactiva */
.element {
  -webkit-transition: opacity .3s ease; /* Safari 6 y Chrome 25 */
  transition: opacity .3s ease;
}