Transiciones y animaciones en CSS

El movimiento bien usado ayuda a entender qué ha pasado en una página: que un menú se ha abierto, que un botón ha respondido, que algo está cargando. CSS permite animar sin escribir JavaScript.

Transiciones: cambios suaves

Sin transición, cuando un botón cambia de color al pasar el ratón, el cambio es instantáneo. Con transition, el navegador pasa de un valor a otro poco a poco:

.boton {
  background: #2d6cdf;
  transition: background-color 0.3s ease;
}
.boton:hover {
  background: #1b4bb0;
}

transition se pone en el estado normal, no en el :hover, para que la animación funcione tanto al entrar como al salir.

Tiene cuatro partes (solo la duración es obligatoria):

transition: propiedad duración curva retraso;
transition: opacity 0.3s ease-in-out 0.1s;
transition: transform 0.2s, opacity 0.2s;   /* varias propiedades */

• Propiedad: qué se anima. Evita all: puede animar cosas que no querías y es menos eficiente.
• Duración: en segundos (0.3s) o milisegundos (300ms). Para interfaces, entre 150 y 400 ms. Más lento se siente pesado.
• Curva (timing function): cómo acelera. ease (por defecto), linear, ease-in, ease-out, ease-in-out. Para elementos que aparecen, ease-out se siente más natural.
• Retraso: cuánto espera antes de empezar.

No todas las propiedades se pueden animar: display, por ejemplo, no. Para que algo aparezca suavemente se anima opacity (y quizá transform).

transform: mover, escalar, girar

transform cambia la forma o la posición visual de un elemento sin afectar a los demás (el hueco original se mantiene):

transform: translate(20px, -10px);  /* mover: x, y */
transform: translateY(-4px);        /* subir 4px */
transform: scale(1.1);              /* agrandar un 10 % */
transform: rotate(45deg);           /* girar 45 grados */
transform: translateY(-4px) scale(1.05);  /* varias a la vez */

Anima siempre que puedas transform y opacity. El navegador los puede animar con la tarjeta gráfica, sin recalcular la página, y el resultado es fluido incluso en móviles modestos. Animar width, height, top o margin obliga a recolocar todo en cada fotograma y suele ir a saltos.

Animaciones con @keyframes

Las transiciones van de un estado A a un estado B cuando algo cambia. Para animaciones más complejas, que se repiten o que empiezan solas, se definen fotogramas clave:

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

Y se aplican con animation:

.aviso { animation: aparecer 0.4s ease-out; }
.corazon { animation: latido 1s ease-in-out infinite; }

Las partes de animation: nombre, duración, curva, retraso, número de repeticiones (infinite para siempre), dirección (alternate para ir y volver) y forwards (para quedarse en el último fotograma al terminar).

Respeta a quien no quiere movimiento

Algunas personas sufren mareos o dolores de cabeza con las animaciones. Pueden activar en su sistema operativo la opción de reducir el movimiento, y tu CSS debe respetarla:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Buenas prácticas

• Anima con un propósito: dar respuesta a una acción, guiar la atención o mostrar un cambio de estado. No decores por decorar.
• Duraciones cortas: 150-400 ms para interfaces.
• Anima transform y opacity.
• Nada de animaciones que parpadeen más de tres veces por segundo: pueden provocar crisis epilépticas.
• Incluye siempre la regla de prefers-reduced-motion.