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

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

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