HOME > 記事アーカイブ > 【@property】CSS変数(カスタムプロパティ)でテキストグラデーションを滑らかにアニメーションする方法【こんかい技術メモ#2】

2025/05/01

【@property】CSS変数(カスタムプロパティ)でテキストグラデーションを滑らかにアニメーションする方法【こんかい技術メモ#2】

こんにちは！Webコーダーのこんかいです！

先日このサイトのヘッダー上部の『おしゃべりこんかい』をアップデートしました！

今回はこのような形で、
テキストグラデーションの色を変化させるアニメーションを@propertyを使ったCSS変数で実装したのでご紹介します！

こんかい

ちなみにこれは、0.05%、0.5%、1%の確率で見れます！もし見れたらスクショして私にご報告してください！笑

この記事の目次

実際のコードはこんな感じです！

@propertyとは、CSS変数(カスタムプロパティ)の（--angle や --color など）の「型」や「初期値」をブラウザに教えてあげるためのルールを記述するものです。

…とだけ言われても良くわからないので具体例にコードを見ながら理解していきましょう！

まず、普通のCSS変数は

:root{
	--angle:0deg;
}

SCSS

こんな感じで初期化します。

これを@propertyを使用して初期化すると、

@property --angle {
  syntax: "<angle>";        /* 角度として扱うよ */
  initial-value: 0deg;      /* 初期値 */
  inherits: false;          /* 継承しない */
}

SCSS

こうなります。

syntaxは値の形式を指定します。<number>、<length>、<angle>、<color> など

initial-valueはプロパティが指定されなかったときのデフォルト値を指定します(0degなど)

inheritsは親要素から子要素へ継承するかどうかを指定します（true / false）

…と言われてもまだ何が違うかあまりわからないと思うので、
とりあえず初期化の方法が違うんだなとだけ覚えておいてください笑

※@propertyは、2024年7月にFirefoxにサポートされ、
全てのブラウザにサポートされました！やったー！

結論から言うと@propertyを使わないとCSS変数をアニメーションさせることはできません。

CSS変数（カスタムプロパティ）は通常アニメーションできません。
そこで、@propertyを使うことで CSS変数を「アニメーション可能な値」として
ブラウザに明示的に登録できます。

:root{
	--angle:0deg; /* この書き方だと、あくまで「今の値を0degにセットした」だけ。 */
}

...

@keyframes angle-animation {
  to {
    --angle: 360deg;
  }
}

SCSS

ここで@propertyを使っていないと、--angleの値は時間経過で変化しません。
つまり、conic-gradient(from var(--angle), ...)もずっと固定のままです。

中間値の補間をブラウザが自動で計算してくれます！
今回でいうと0degの初期値からangle-animationで定義している360degまで自動的に補間をしてくれています！

@propertyを使わない場合は、@keyframes angle-animationのところを一つひとつグラデーションを変更する書き方をしないといけません。

しかし、@propertyを使うことで、—angleのみをアニメーションさせているので要素ごとに別のアニメーションを作成する必要がありません。

同様のアニメーションがあるときには使い回しができるのでとっても便利です!
(グラデーションをkeyframesで指定するとなると途方もない作業になります…)

--angle が <angle> として認識される
angle-animation によって 0deg → 360deg に滑らかに変化
conic-gradient(from var(--gradient-angle)) の角度がリアルタイムで変わる → ぐるぐる回る虹色ボーダーが完成！

いかがでしたか？

今回ご紹介した @propertyを使用して皆さんのCSSアニメーションの幅が広がれば幸いです！

本記事がためになったら共有していただけるととっても喜びます！