CSS だけでテキストを虹色のグラデーションでアニメーションさせる

ある文字列全体の color がアニメーションで変化するのではなくて、linear-gradient() で作ったグラデーションを文字色として適用し、それをアニメーションさせる。

説明がよく分からないと思うので、以下のデモで実物を見て欲しい。

こんな風になる。

グラデーションさせる文字列は span など任意のインライン要素で囲んでしまって良い。幅指定なども不要。

サンプルは虹色にグラデーションするように作ったが、始点と終点の色さえ合わせておけばリニアにループできるので、どんなグラデーションにしても問題ないだろう。

以下 CSS コード。

.example {
  /* フォントサイズなどを任意で指定する */
  font: bold 10em / 1 Verdana, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  
  /* 背景グラデーションを指定・幅を 200% にしておく */
  background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
  
  /* 背景画像を文字でマスクする */
          background-clip: text;
  -webkit-background-clip: text;
  
  /* 文字色を透明にできればよく color: transparent でも color: rgba(0, 0, 0, 0) でも可 */
          text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  
  /* アニメーション指定 */
  animation: example 4s linear infinite;
}

/* 背景の横位置をズラす */
@keyframes example {
  to { background-position-x: 200%; }
}

background をテキストでマスクするには、-webkit-background-clip: text というプロパティで制御できる。background-clip: text の方はまだ仕様外だと思われるが、一応指定。

文字色を透過させるには、-webkit-text-fill-color: transparent を使ったが、文字色を透明にできれば良いので、color: transparent でも、color: rgba(0, 0, 0, 0) でも大丈夫だった。コレで背景のマスクが出来た。

続いて背景のグラデーションを指定するワケだが、ポイントは background-size で幅を 200% に指定しておくこと。コレがないと background-position (-x) でパーセント指定した時にアニメーションしないのである。

上述のサンプルコードは background プロパティにまとめて書いてしまっているが、まとめる必要がなければ background-position の始点に関する指定は不要。

最後に background-position-x をズラすアニメーションを定義して無限ループさせれば OK。

これでちょっとした演出ができるかと。