CSSで文字の柄を一定間隔で変えていく方法

CSSで文字の柄を一定間隔で変えていく方法

CSSで文字の柄を一定間隔で変えていく方法の紹介です。

ファーストビューに表示するサイトタイトルなどをこのように装飾してあげるとスタイリッシュな感じのサイトになるといいと思います。

デモ

See the Pen XExZRE by mizusawa (@webty_mizusawa) on CodePen.

サンプルコード

<div class="title">sample</div>
.title {
  background: url('sample01.png') center cover;
  -webkit-background-clip: text;
  color: transparent;
  animation: animation 2s steps(5) infinite;
}
@keyframes animation {
    0% { background-image: url('sample01.png'); }
   25% { background-image: url('sample02.png'); }
   50% { background-image: url('sample03.png'); }
   75% { background-image: url('sample04.png'); }
  100% { background-image: url('sample05.png'); }
}

animation: animation 2s steps(5) infinite; の「 2s 」がアニメーションがループするまでの時間、 「 steps(5) 」が画像を切り替える回数のパラメータを示しています。

画像の切り抜きに -webkit-background-clip: text; を使用しているので、一部ブラウザは対応していない点に注意してください。