@property convierte custom properties en valores tipados y animablesUna custom property sin registrar es una cadena. Con @property le dices al navegador qué tipo de dato espera, si hereda y cuál es su valor inicial. Ahí es cuando puede interpolarla de verdad.
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.ring {
animation: spin 4s linear infinite;
}
El hover no sustituye colores completos: anima --hue como número y el color se recalcula con hsl().
La variable --angle rota de 0deg a 360deg en cada ciclo. Sin registro, esta animación no se interpolaría correctamente.
La anchura visual nace de --pct. El navegador anima un porcentaje real, no una cadena opaca.