Transiciones y Animaciones

Las animaciones CSS hacen las interfaces más vivas sin JavaScript. Las transiciones son el tipo más simple: definen cómo cambia una propiedad de un valor a otro suavemente. transition: color 0.3s ease-in-out hace que el color cambie gradualmente en 0.3 segundos cuando el elemento pasa de un estado a otro (como :hover).

Los keyframes permiten animaciones complejas con múltiples estados intermedios. @keyframes nombre define los estados (0%, 50%, 100%) y animation aplica la animación con duración, repetición y función de timing. Para mejor rendimiento, anima solo transform y opacity: estas propiedades no causan reflow del layout y son aceleradas por GPU.

/* TRANSICIONES - de un estado a otro */
.boton {
  background: #00E5A0;
  transform: scale(1);
  box-shadow: 0 4px 15px rgba(0, 229, 160, 0.3);
  
  /* Transición: propiedad duración función retraso */
  transition: all 0.3s ease;
  /* o específico: */
  transition: background 0.3s ease, transform 0.2s ease;
}
.boton:hover {
  background: #00B880;
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 229, 160, 0.5);
}

/* ANIMACIONES - movimiento continuo */
@keyframes pulsar {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes deslizar {
  from { transform: translateX(-100px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.animado {
  animation: pulsar 2s ease-in-out infinite;
  animation: deslizar 0.5s ease forwards;
}