数値 CSS 変数の補間

CSS で非常に簡単に変数を作成できます。

:root {
  --scale: 1;
}

そして、それらを任意の要素で宣言できます。

.thing {
  transform: scale(--scale);
}

このような例では、変数をユーザー インタラクションに適用するとさらに効果的です。 :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

しかし、アニメーションでその変数を使用したい場合は… 灘。

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

これは、変数が文字列として認識され、必要なのは XNUMX つの数値の間で補間できる数値であるためです。 それが私たちが電話をかけることができる場所です @property 変数をカスタム プロパティとして登録するだけでなく、その構文を数値として定義します。

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

これでアニメーションができました！

あなたはしたいつもりです ブラウザのサポートを確認する から @property Chrome にのみ上陸しました ( バージョン85) この記事の執筆時点で。 そして、あなたがそれを嗅ぎ分けたいのなら @supports、@-規則を値として受け入れないため、現在運が悪い…まだ. 一回で変わるよ at-rule()実物になる.