前回の記事で、CSS 変数（カスタムプロパティ）の使い方について解説しましたが、定義した変数を@keyframes内で変更してアニメーションに使用するとどうなるでしょう？

結論から言うと、普通に変数を定義しただけでは@keyframes内で変更してアニメーションに使用することはできません。

今回は、CSS 変数をアニメーションで使用するために必要な @property ルールについて解説します。

普通に定義した変数をアニメーションに使用したサンプル

まずは、普通に定義しただけの変数をアニメーションに使用した、いわば失敗例です。

CSS 変数で、--box-widthと--box-bg-colorを定義し、@keyframesで--box-widthが100pxから200pxに変化、--box-bg-colorが#6f86d6から#00ecbcに変化するアニメーションを、繰り返し行うように指定してあります

:root {
  --box-width: 100px;
  --box-bg-color: #6f86d6;
}

.box {
  width: var(--box-width);
  height: 100px;
  animation-name: box-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: var(--box-bg-color);
}

@keyframes box-animation {
  0% {
    --box-width: 100px;
    --box-bg-color: #6f86d6;
  }
  50% {
    --box-width: 200px;
    --box-bg-color: #00ecbc;
  }
  100% {
    --box-width: 100px;
    --box-bg-color: #6f86d6;
  }
}

これを実際に表示させてみるとこうなります。

See the Pen CSS Custom Properties Animation Sample 01 by YUTSUZO (@YUTSUZO) on CodePen.

…ピコピコしてますね。普通に定義しただけの変数をアニメーションに使用すると、このように間の値が補完されず、瞬時に切り替わるような動きになってしまいます。

@property ルールを定義する

@property ルールは、CSS 変数の定義をより厳密に行うためのもので、変数の型、値の継承の有無、およびデフォルト値を明示的に指定できます。スタイルシートでは、以下のように記述することで定義できます。

@property --box-bg-color {
  syntax: "<color>"; /* 変数の型 */
  inherits: true; /* 値の継承するかどうか */
  initial-value: #000; /* デフォルト値 */
}

この @propertyルールを、CSS 変数と一緒に定義することで、補完が効いたアニメーションをさせることが可能になります。

変数の型で使用できる値については、こちらをご参照ください。
syntax - CSS: カスケーディングスタイルシート | MDN

変数と一緒に @property ルールを定義したアニメーションサンプル

というわけで、@property ルールをこのようにスタイルシートに追加してみました。それ以外の部分は先ほどのサンプルから変わっていません。

/* 追加ここから */
@property --box-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

@property --box-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
/* 追加ここまで */

:root {
  --box-width: 100px;
  --box-bg-color: #6f86d6;
}

.box {
  width: var(--box-width);
  height: 100px;
  animation-name: box-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: var(--box-bg-color);
}

@keyframes box-animation {
  0% {
    --box-width: 100px;
    --box-bg-color: #6f86d6;
  }
  50% {
    --box-width: 200px;
    --box-bg-color: #00ecbc;
  }
  100% {
    --box-width: 100px;
    --box-bg-color: #6f86d6;
  }
}

そして、これを実際に表示させてみるとこうなります。

See the Pen CSS Custom Properties Animation Sample 02 by YUTSUZO (@YUTSUZO) on CodePen.

滑らかにアニメーションされるようになりました。

関連記事

CSS変数（カスタムプロパティ）の使い方と:rootの小話

CSS 変数の使い方と、変数の定義に使う「:root」についての小話。

https://yutsuzo.com/web/css/how-to-use-css-variables-custom-properties/

参考