¿Cuál es la diferencia entre transiciones y animaciones en CSS?

La diferencia fundamental entre las transiciones y las animaciones CSS radica en su propósito, complejidad y control:

Transiciones CSS (transition):

Las transiciones están diseñadas para animar el cambio suave de una propiedad CSS desde un valor inicial a un valor final durante un período específico.

Su característica principal es que necesitan un «disparador» para activarse. Este disparador suele ser un cambio de estado, como cuando el usuario pasa el ratón por encima de un elemento (:hover), un elemento recibe el foco (:focus), se modifica una clase mediante JavaScript, o se cambia directamente un estilo. Son ideales para efectos simples y directos entre dos estados.

Por ejemplo, cambiar el color de fondo de un botón al pasar el cursor:

.mi-boton {
  background-color: blue;
  transition: background-color 0.4s ease-out;
}

.mi-boton:hover {
  background-color: darkblue; /* La transición anima este cambio */
}Lenguaje del código: PHP (php)

Animaciones CSS (animation y @keyframes):

Las animaciones permiten crear secuencias de efectos visuales mucho más complejas y detalladas, con múltiples pasos intermedios. Estos pasos se definen mediante la regla @keyframes.

A diferencia de las transiciones, las animaciones pueden iniciarse automáticamente al cargar la página, repetirse un número específico de veces o de forma indefinida (animation-iteration-count), cambiar de dirección (animation-direction), y ofrecen un control más granular sobre la secuencia.

Por ejemplo, un efecto de parpadeo:

.alerta {
  animation-name: parpadeo;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

@keyframes parpadeo {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}Lenguaje del código: PHP (php)

En resumen: las transiciones son para cambios de estado sencillos y fluidos, mientras que las animaciones son para secuencias de movimiento y efectos visuales más elaborados y con mayor control.