La API @property en CSS te permite crear variables personalizadas con tipo definido para animar propiedades como colores, longitudes y más. Si ya trabajas con var() y quieres llevar tus animaciones al siguiente nivel, esta función te da control total sobre cómo se comportan tus valores dinámicos.

¿Qué es la API @property en CSS y para qué sirve?

La regla @property registra una propiedad personalizada con un tipo de dato específico, lo que habilita transiciones suaves sobre valores que antes no eran animables con simples variables CSS.

A diferencia de las variables tradicionales que defines en :root, aquí declaras la sintaxis que acepta la variable, si se hereda o no, y un valor inicial. Esa estructura es la que permite que el navegador interpole el cambio durante una animación.

¿En qué se diferencia @property de var()? var() solo lee el valor de una variable, mientras que @property registra esa variable con un tipo (color, length, etc.) y un valor inicial, lo que permite animarla con transition.

¿Cómo se declara una propiedad personalizada con @property?

La sintaxis exige tres campos obligatorios para que funcione correctamente. Veamos un ejemplo donde definimos un color de fondo animable.

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

Cada línea cumple un rol específico:

• syntax: indica el tipo de valor que acepta la variable, entre comillas. En este caso <color>, pero podría ser <length>, <number> u otros.
• inherits: define si los elementos hijos heredan el valor. Aquí va en false para evitar que se propague.
• initial-value: establece el valor por defecto antes de cualquier interacción. Empezamos con white.

Esa terna es lo que distingue una variable común de una variable registrada y animable.

¿Cómo animar el color de fondo con @property y hover?

Una vez registrada la propiedad, la usas dentro de tus selectores como cualquier variable CSS, pero con el plus de poder ponerle una transition.

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

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

Aquí pasa algo interesante: el body arranca en blanco y, al pasar el mouse por encima, transiciona suavemente al amarillo durante dos segundos con una curva ease-in-out. Cuando sacas el cursor, regresa al blanco con la misma fluidez.

¿Por qué necesito transition si ya uso :hover? Porque :hover solo dispara el cambio de valor. La propiedad transition es la que interpola entre el valor inicial y el final a lo largo del tiempo definido.

¿Por qué el fondo cambia solo en parte de la pantalla?

Un detalle que suele confundir: si abres el inspector con F12, vas a notar que el body solo ocupa el espacio del contenido real, en este caso un H1. Todo lo que está fuera de ese contenedor no se pinta porque el body no tiene relleno extra.

Por eso, al mover el mouse fuera del área ocupada por el contenido, el fondo vuelve a blanco aunque sigas dentro de la ventana. Es comportamiento esperado, no un error de la animación.

¿Qué otras propiedades puedo animar con @property?

El color es solo un ejemplo. La verdadera potencia de esta API aparece cuando la combinas con otros tipos de sintaxis.

• <color> para fondos, bordes y textos animados.
• <length> para tamaños, márgenes o paddings con interpolación suave.
• <number> para valores numéricos puros como opacidad o factores de escala.

Esa flexibilidad es la que convierte a @property en una herramienta clave para diseñar interfaces con micro interacciones pulidas, sin recurrir a JavaScript.

¿Qué animación vas a construir primero con esta técnica? Cuéntame en los comentarios cómo la estás aplicando en tus proyectos.