Newly available 条件付きYES。Baseline Newly available。アニメーション付きCSS変数が必要な場面で使用推奨。フォールバック戦略を併用。

@property (registered custom properties)

@property は CSS のアットルールで、 API の CSS Houdini の傘下にあるものです。開発者が明示的に CSS カスタムプロパティ を定義し、プロパティ型のチェック、デフォルト値の設定、プロパティが値を継承するかどうかの定義ができるようになっています。

@property ルールは、 JavaScript を実行することなく、スタイルシートの中で直接カスタムプロパティの登録を表します。有効な @property ルールは、あたかも registerProperty() が同等の引数で呼び出されたかのように、登録されたカスタムプロパティを生成します。

変数アニメーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@property
85
85
128
16.4
85
16.4
DOM API
registerProperty_static

CSS.registerProperty() メソッドはカスタムプロパティを登録し、プロパティ型のチェック、デフォルト値、値の継承の有無の指定を行うことができます。
78
79
128
16.4
78
16.4
CSSPropertyRule

CSSPropertyRule は CSS プロパティと値 API のインターフェイスで、 CSS の @property ルールを表します。
85
85
128
16.4
85
16.4
inherits

inherits は CSSPropertyRule インターフェイスの読み取り専用プロパティで、 @property ルールで表現されているカスタムプロパティ登録の継承フラグ、つまり、そのプロパティが既定値では継承されるかどうかを記述した論理値を返します。
85
85
128
16.4
85
16.4
initialValue

initialValue は CSSPropertyRule インターフェイスの読み取り専用プロパティで、 null にすることができます。 @property ルールで表されるカスタムプロパティ登録の初期値を返し、プロパティの初期値を制御します。
85
85
128
16.4
85
16.4
name

name は CSSPropertyRule インターフェイスの読み取り専用プロパティで、これはプロパティ名を表します。これは @property ルールの前置き部分においてカスタムプロパティに指定された名前をシリアライズしたものです。
85
85
128
16.4
85
16.4
syntax

syntax は CSSPropertyRule インターフェイスの読み取り専用プロパティで、 これは、 @property ルールによって表されるカスタムプロパティ登録のリテラル構文を返し、プロパティの値が計算値の時点でどのように解釈されるかを制御するものです。
85
85
128
16.4
85
16.4
CSS @ ルール
inherits

inherits は CSS における @property アットルールの記述子で、登録された CSS カスタムプロパティがデフォルトで継承するかどうかを制御します。 これは必須の記述子です。なかったり無効であったりした場合、 @property ルール全体が無効となり無視されます。
85
85
128
16.4
85
16.4
initial-value

initial-value は @property アットルールの記述子で、登録された CSS カスタムプロパティの初期値を指定します。 @property/syntax 記述子の値が全称構文 (*) でない限り、必須の記述子です。 必須であるにもかかわらず欠落しているか不正な場合、@property ルール全体が無効となり無視されます。
85
85
128
16.4
85
16.4
syntax

syntax は @property アットルール の記述子で、登録された CSS カスタムプロパティに利用できる値を定義します。 これは、プロパティの指定値がどのように処理されて計算値が導出されるかを制御します。 必須の記述子です。欠落または無効な場合、@property ルール全体が不正となり無視されます。
85
85
128
16.4
85
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gradient-box {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), #3b82f6, #8b5cf6);
  transition: --gradient-angle 0.6s ease;
}

.gradient-box:hover {
  --gradient-angle: 180deg;
}

@property --progress {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

.progress-bar {
  --progress: 0%;
  background: linear-gradient(90deg, #16a34a var(--progress), #e5e7eb var(--progress));
  transition: --progress 0.4s ease;
}

ライブデモ

Gradientangletransition

@property (registered custom properties) Gradientangletransition demo.

プレビュー全画面表示

Progress bar

@property (registered custom properties) progressba- demo.

プレビュー全画面表示

col-transition

@property (registered custom properties) col-transition demo.

プレビュー全画面表示

実務での使いどころ

  • グラデーションのアニメーション

    通常はアニメーション不可能なグラデーションの角度・色停止位置をスムーズにトランジション。

  • プログレスバーのアニメーション

    パーセント値をCSS変数で管理し、スムーズなアニメーション付きプログレスバーを実現。

注意点

  • Firefox 128 以降で対応。古い Firefox ではフォールバックが必要。
  • syntax に指定できる型が限られている（<color>、<length>、<angle>、<number> など）。

フォールバック戦略

CSS 
/* フォールバック: 静的なグラデーション */
.gradient-box {
  background: linear-gradient(0deg, #3b82f6, #8b5cf6);
}

/* モダンブラウザ: アニメーション付き */
@supports (background: paint(id)) {
  @property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
}

アクセシビリティ

  • アニメーションは prefers-reduced-motion: reduce を尊重し、不要なモーションを無効化する。

参考リンク