CSS変数（カスタムプロパティ）に型・初期値・継承の有無を登録できるアットルールです。型を登録した変数はtransitionやanimationで補間可能になり、グラデーションのアニメーションなど従来不可能だった表現がCSSだけで実現できます。
@property --name { syntax: '<type>'; inherits: true|false; initial-value: <value>; }@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.gradient-border {
background: conic-gradient(from var(--angle), #2563eb, #ec4899, #2563eb);
transition: --angle 0.5s;
}
.gradient-border:hover {
--angle: 180deg;
}型登録によりグラデーションの角度をスムーズにアニメーション
@property --progress {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.bar {
background: linear-gradient(to right, #22c55e var(--progress), #e5e7eb var(--progress));
transition: --progress 0.8s ease;
}プログレスバーの進捗をCSS変数の補間で滑らかに変化
syntaxに使える型は<color>、<length>、<angle>、<percentage>、<number>など。登録していないCSS変数は「ただの文字列」なので補間されず、値が瞬時に切り替わるだけです。JavaScriptからはCSS.registerProperty()でも登録できます。
syntax: '*'（任意）の場合を除きinitial-valueは必須です。またinheritsも省略できません。変数のtransitionが「一瞬で切り替わる」場合は@propertyの登録漏れがほぼ原因です。
AIは「CSS変数をtransitionで滑らかに変化させる」コードを@propertyなしで生成しがちで、そのままでは補間されずに動きません。変数のアニメーションが絡んだら@propertyの型登録が必要、とセットで覚えさせてください。またsyntax値の引用符（syntax: '<angle>'）を落とす生成ミスもよくあります。
ホバーでグラデーションの角度が回転するボーダーを@propertyと conic-gradientで実装して
このCSS変数ベースのプログレスバーがカクカク切り替わるのを、@propertyで型登録して滑らかにして
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。