Tema 24 · Animaciones y CSS Moderno

Animaciones @keyframes, Variables y Responsive

Aprende a programar animaciones continuas con fotogramas clave @keyframes, a definir variables nativas con Custom Properties y a crear diseño responsivo profesional con @media queries.

Transiciones Suaves y Transformaciones 2D

Animaciones con Fotogramas Clave: @keyframes

A diferencia de las transiciones (que solo conectan un estado inicial con uno final), las animaciones en CSS3 permiten definir múltiples etapas intermedias mediante la regla @keyframes, ejecutándose de forma continua y autónoma sin interacción del usuario. 

/* Definición de la animación de pulso infinito */
@keyframes efecto-pulso {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Aplicación sobre el elemento */
.indicador-activo {
  animation: efecto-pulso 2s infinite ease-in-out;
}

Variables Nativas en CSS (Custom Properties)

Las variables de CSS permiten centralizar paletas de color, espaciados y tipografías en un solo lugar, facilitando la creación de temas claros y oscuros con cero duplicación de código: 

/* Declaración global en la raíz */
:root {
  --color-primario: #2563eb;
  --color-fondo: #f8fafc;
  --radio-borde: 12px;
}

/* Consumo con la función var() */
.tarjeta {
  background-color: var(--color-fondo);
  border-radius: var(--radio-borde);
  border: 2px solid var(--color-primario);
}

Diseño Responsivo con Media Queries (@media)

Las Media Queries son directivas condicionales que aplican estilos específicos cuando la pantalla del usuario cumple ciertas características de ancho o resolución (enfoque Mobile-First): 

/* Estilos móviles por defecto (1 columna) */
.grid-responsive {
  display: grid;
  grid-template-columns: 1fr;
}

/* En tablets y escritorios (a partir de 768px): 2 columnas */
@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

⚡ Indicador de Pulso Animado y Variables con Modo Oscuro

Observa la animación continua de pulso con @keyframes y haz clic en el botón para alternar el tema visual entre claro y oscuro reasignando variables CSS:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Animaciones, Variables y Responsive</title>
  <style>
    /* 1. Declaración de variables CSS en :root */
    :root {
      --bg-pagina: #f8fafc;
      --bg-tarjeta: #ffffff;
      --color-texto: #0f172a;
      --color-borde: #cbd5e1;
      --color-acento: #2563eb;
    }

    /* Variables para modo oscuro */
    .modo-oscuro {
      --bg-pagina: #0f172a;
      --bg-tarjeta: #1e293b;
      --color-texto: #f8fafc;
      --color-borde: #334155;
      --color-acento: #38bdf8;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: var(--bg-pagina);
      color: var(--color-texto);
      margin: 0;
      padding: 30px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .tarjeta-animada {
      background-color: var(--bg-tarjeta);
      border: 1px solid var(--color-borde);
      border-radius: 14px;
      padding: 26px;
      max-width: 480px;
      margin: 0 auto;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    /* Cabecera con luz indicadora */
    .cabecera-estado {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    /* 2. Animación con @keyframes */
    @keyframes pulso-verde {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      }
      70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }
    }

    .luz-pulso {
      width: 14px;
      height: 14px;
      background-color: #10b981;
      border-radius: 50%;
      animation: pulso-verde 2s infinite;
    }

    .btn-toggle-tema {
      background-color: var(--color-acento);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 15px;
    }

    /* 3. Media Query Responsiva */
    @media (max-width: 600px) {
      body {
        padding: 15px;
      }
      .tarjeta-animada {
        padding: 18px;
      }
    }
  </style>
</head>
<body>

  <div class="tarjeta-animada">
    <div class="cabecera-estado">
      <div class="luz-pulso"></div>
      <strong style="color: #10b981; font-size: 0.9rem; text-transform: uppercase;">
        Servidor Kilopolis en Vivo
      </strong>
    </div>

    <h2 style="margin-top: 0;">Animaciones & Variables CSS3</h2>
    <p style="font-size: 0.95rem; line-height: 1.6; opacity: 0.85;">
      El punto verde late de forma autónoma con <code>@keyframes</code>, mientras que todos los colores se consumen mediante variables <code>var(--variable)</code>.
    </p>

    <button class="btn-toggle-tema" onclick="alternarTema()">
      🌓 Alternar Tema Claro / Oscuro
    </button>
  </div>

  <script>
    function alternarTema() {
      document.body.classList.toggle('modo-oscuro');
    }
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.