# @property

> CSS変数（カスタムプロパティ）に型・初期値・継承の有無を登録できるアットルールです。型を登録した変数はtransitionやanimationで補間可能になり、グラデーションのアニメーションなど従来不可能だった表現がCSSだけで実現できます。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/at-property/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/@property

## 構文

```css
@property --name { syntax: '<type>'; inherits: true|false; initial-value: <value>; }
```

## ブラウザ対応

- Baseline 新しく利用可能（2024年7月に全主要ブラウザ対応）
- Chrome 85+ / Firefox 128+ / Safari 16.4+ / Edge 85+

## コード例

### 例1: 型登録によりグラデーションの角度をスムーズにアニメーション

```css
@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;
}
```

### 例2: プログレスバーの進捗をCSS変数の補間で滑らかに変化

```css
@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;
}
```

## TIPS

syntaxに使える型は<color>、<length>、<angle>、<percentage>、<number>など。登録していないCSS変数は「ただの文字列」なので補間されず、値が瞬時に切り替わるだけです。JavaScriptからはCSS.registerProperty()でも登録できます。

## よくある間違い

syntax: '*'（任意）の場合を除きinitial-valueは必須です。またinheritsも省略できません。変数のtransitionが「一瞬で切り替わる」場合は@propertyの登録漏れがほぼ原因です。

## AIがよく間違えるポイント

AIは「CSS変数をtransitionで滑らかに変化させる」コードを@propertyなしで生成しがちで、そのままでは補間されずに動きません。変数のアニメーションが絡んだら@propertyの型登録が必要、とセットで覚えさせてください。またsyntax値の引用符（syntax: '<angle>'）を落とす生成ミスもよくあります。

## AIへの依頼文例

- ホバーでグラデーションの角度が回転するボーダーを@propertyと conic-gradientで実装して
- このCSS変数ベースのプログレスバーがカクカク切り替わるのを、@propertyで型登録して滑らかにして

## 関連プロパティ

- [css-custom-properties](https://www.css-dictionary.com/property/css-custom-properties.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [animation](https://www.css-dictionary.com/property/animation.md)
- [linear-gradient](https://www.css-dictionary.com/property/linear-gradient.md)