文字色がカラフルに変化するアニメーションを作りたいのですが書き方がわかりません。

Question

以下のように「box-shadow」を「@keyframes」と「filter: hue-rotate();」を使ってスムーズに変化させることはできました。
↓それがこのコードです
https://codepen.io/sino3325/pen/mdLLJMy

そこで、次は文字色をカラフルに変化させたいのですが「color: hue-rotate();」は効かないですしどうしたらいいのでしょうか？
私の知識では以下の書き方が精一杯です。（できれば上記のコードのときのように色相環を使って変化させたい...）
↓テキストがカラフルに変化するコードです
https://codepen.io/sino3325/pen/mdLLJxe

Answer 1

下記でどうでしょうか。

.text {
  font-size: 5em;
  color: #0f0;
  animation: color-change 2s linear infinite;
}

@keyframes color-change {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

テキストの色は黒と白以外にしておかないと変化しません。白と黒には色相はないので。

Comments

[sino3325]

ありがとうございます！
白と黒以外にする必要があったんですね！
とても助かりました！