📘 Módulo 14: CSS Avanzado – Animaciones de interfaz y microinteracciones

Aprender a crear microinteracciones que mejoren la experiencia del usuario. Diseñar loadores y spinners con CSS puro.

Objetivos

Aprender a crear microinteracciones que mejoren la experiencia del usuario.
Diseñar loaders y spinners con CSS puro.
Implementar transiciones entre páginas o secciones.
Usar animaciones sutiles para guiar la atención del usuario.

🔹 1. Microinteracciones en botones

css

.boton {
  background: #003366;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boton:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

👉 El botón se eleva ligeramente al pasar el ratón, generando una sensación de respuesta inmediata.

🔹 2. Loaders y spinners

css

.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #003366;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: girar 1s linear infinite;
}

@keyframes girar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

👉 Spinner clásico para indicar carga.

🔹 3. Transiciones entre secciones

css

.seccion {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.seccion.visible {
  opacity: 1;
  transform: translateY(0);
}

👉 Al entrar en pantalla, la sección aparece suavemente.

🔹 4. Animaciones de iconos

css

.icono {
  display: inline-block;
  animation: pulso 1.5s infinite;
}

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

👉 Icono que late suavemente para llamar la atención.

🔹 5. Buenas prácticas

Mantén las animaciones sutiles y rápidas (0.2–0.6s).
Usa animaciones para reforzar la interacción, no para distraer.
Respeta la preferencia del usuario con prefers-reduced-motion.

📝 Actividad práctica

Implementa un botón con microinteracción de elevación al hover.
Crea un loader circular con animación infinita.
Haz que las secciones de tu página aparezcan con transición al hacer scroll.

MÓDULO 15 CSS Efectos Visuales