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

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

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

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

目次

デモ

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

サンプルコード

.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; を使用しているので、一部ブラウザは対応していない点に注意してください。