La direttiva CSS @property è una funzionalità che consente di definire proprietà CSS che, a differenza delle variabili CSS (`--nome-var`), offre la possibilità di avere comportamenti più avanzati come transizioni e animazioni.

Questa metodologia fa parte delle Houdini API, un insieme di tecnologie che permette di estendere le capacità del CSS in modo nativo e performante.

Normalmente, quando si usano variabili CSS come --my-color: red;, il browser non conosce il tipo di dato. Ciò significa che non può, ad esempio, animarla o applicare transizioni tra valori in autonomia.
Con @property, invece, tramite la registrazione, il browser comprende il significato del valore inserito così da applicare validazioni, animazioni e interpolazioni.

@property --nome-proprietà {
  syntax: '<color>';
  inherits: false;
  initial-value: black;
}

syntax definisce il tipo di valore accettato: per i colori, lunghezze, numeri, per interi, angoli come deg o rad, oppure una combinazione di valori | . inherits indica invece se la proprietà viene ereditata dagli elementi figli.

@property --rotation {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.box {
  /*altre proprietà*/
  transform: rotate(var(--rotation));
  transition: --rotation 1s;
}

.box:hover {
  --rotation: 180deg;
}

Se non avessimo registrato la proprietà con @property, l'animazione non sarebbe fluida: il browser vedrebbe solo un cambio di valore testuale.