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。
これでちょっとした演出ができるかと。