Animaciones con Propiedades Personalizadas en CSS

Clase 15 de 34 • Curso de CSS Avanzado y Responsive Design

Clase anteriorSiguiente clase

Resumen

Utilizar la API Properties en CSS te permite definir propiedades personalizadas para crear animaciones fluidas y efectivas. Esto resulta especialmente útil cuando deseas controlar con precisión propiedades como el color o el tamaño (length) sin afectar elementos secundarios.

¿Qué es la API Properties y cómo funciona en CSS?

La API Properties es una manera de definir variables personalizadas para su uso en animaciones CSS. Para configurar una propiedad personalizada, la sintaxis es similar a la de definir variables CSS tradicionales con var, pero incluye especificaciones adicionales.

La estructura básica es:

@property --color-fondo {
    syntax: "<color>";
    inherits: false;
    initial-value: white;
}

En esta estructura:

  • syntax define qué tipo de propiedad se está personalizando (por ejemplo, color).
  • inherits determina si esta propiedad debe heredarse hacia los elementos hijos o no.
  • initial-value asigna un valor inicial a esta propiedad personalizada.

¿Cómo aplicar API Properties para animar colores de fondo?

Para ver la API Properties en acción, puedes crear una simple animación usando las propiedades personalizadas definidas. Por ejemplo, puedes atraer atención al pasar el mouse por encima del elemento:

<body>
  <h1>Pasa el mouse para poder cambiar el color del fondo</h1>
</body>

Luego, en CSS:

body {
  background-color: var(--color-fondo);
  transition: --color-fondo 2s ease-in-out;
}

body:hover {
  --color-fondo: yellow;
}

Así creas una animación que, al pasar el mouse sobre el cuerpo del documento, cambia gradualmente el color del fondo, desde su color inicial (blanco) hacia amarillo.

¿Qué tener en cuenta para que el efecto cubra adecuadamente el área deseada?

Recuerda que la animación, en este caso, solo afectará el área del elemento BODY, siendo su tamaño determinado por el contenido que posee. Por ejemplo, un <h1> determinará el tamaño actual del BODY si no existen otros elementos o estilos que amplíen su área.

Puedes verificar visualmente y ajustar según sea necesario utilizando herramientas del navegador como el inspector de elementos (generalmente disponible al presionar F12).

¿Ya conocías esta técnica o tienes algún ejemplo práctico para compartir? ¡Esperamos tus comentarios!