MENU
WebデザイナーMutaによる備忘録ブログ
  1. ホーム
  2. CSS
  3. 【CSSアニメーション】背景画像や文字を無限ループする方法

【CSSアニメーション】背景画像や文字を無限ループする方法

CSS

ホームページでテキストや画像が右から左へ無限にスクロールするアニメーションを見たことがあるでしょうか。この無限スクロールは視覚的なインパクトが大きい一方、簡単に実装することができます。

今回は、CSSで背景画像や文字を無限ループする方法についてご紹介します。HTMLとCSSのコードを紹介するので、実際にご自身の開発環境で試してみると良いでしょう。

目次

背景画像や文字を無限ループ

まずはサンプルをご覧ください。
https://mutablog.com/sample/css-infinite-loop.html

サンプルにある通り、以下の３つの方法についてご紹介します。

  1. 文字を無限ループ方法
  2. 画像を無限ループする方法
  3. ホバーしたら無限ループを止める方

1. CSSで文字を無限ループする方法

まずは文字の無限ループをご覧ください。

サンプル）https://mutablog.com/sample/css-infinite-loop.html#nav1

HTML

<ul class="infinite-list">
	<li class="infinite-text-item">INFINITE TEXT ANIMATION</li>
	<li class="infinite-text-item">INFINITE TEXT ANIMATION</li>
	<li class="infinite-text-item">INFINITE TEXT ANIMATION</li>
</ul>

上記のように、無限スクロールしたいテキストを３つ以上用意します。２つだと長さが足りず、無限ループの途中で空白ができてしまうので、長さに応じて３つ以上は用意しましょう。

CSS

.infinite-list {
  display: flex; // 子要素のliを横並びにする
  overflow: hidden; // ブラウザの横幅からはみ出た分は非表示にする
}
.infinite-text-item {
  margin: 0 0.1em; // 左右に余白を設定
  font-size: 100px; // 任意で調整
  letter-spacing: 0.04em; // 任意で調整
  white-space: nowrap; // 文字を折り返さないようにする
  animation: scroll-infinite 50s infinite linear .5s both;
}

// 無限ループ（右から左へ）
@keyframes scroll-infinite {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

上記コードを簡単にまとめると下記の流れになります。

  1. 無限ループするテキストを折り返さないように横並びにする。
  2. @keyframesで無限ループのcssアニメーションを定義し、animationプロパティで呼び出す。

これだけで、無限ループアニメーションを実装することができます。

2. CSSで背景画像を無限ループする方法

次に画像の無限ループをご覧ください。サンプルでは単色の画像を使用しています。

サンプル）https://mutablog.com/sample/css-infinite-loop.html#nav2

HTML

<ul class="infinite-list">
	<li class="infinite-img-item">
		<img src="./common/images/image_infinite_01.png" alt="">
		<img src="./common/images/image_infinite_02.png" alt="">
		<img src="./common/images/image_infinite_03.png" alt="">
		<img src="./common/images/image_infinite_04.png" alt="">
	</li>
	<li class="infinite-img-item">
		<img src="./common/images/image_infinite_01.png" alt="">
		<img src="./common/images/image_infinite_02.png" alt="">
		<img src="./common/images/image_infinite_03.png" alt="">
		<img src="./common/images/image_infinite_04.png" alt="">
	</li>
	<li class="infinite-img-item">
		<img src="./common/images/image_infinite_01.png" alt="">
		<img src="./common/images/image_infinite_02.png" alt="">
		<img src="./common/images/image_infinite_03.png" alt="">
		<img src="./common/images/image_infinite_04.png" alt="">
	</li>
</ul>

テキストを無限ループするときと同様に、画像の横並びセットも３つ以上用意します。imgタグではなく、背景画像としてbackground-imageプロパティを使用しても構いません。

CSS

.infinite-list {
  display: flex; // 子要素のliを横並びにする
  overflow: hidden; // ブラウザの横幅からはみ出た分は非表示にする
}
.infinite-img-item {
  display: flex;
  gap: 40px; // flexアイテムの間に余白を設定
  margin: 0 20px; // 左右に余白を設定
  animation: scroll-infinite 50s infinite linear .5s both;
  img {
    max-width: none; // デフォルトでmax-width: 100%;を指定している場合は無効化
  }
}

// 無限ループ（右から左へ）
@keyframes scroll-infinite {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

CSSは文字の無限ループの記述とほぼ同じですが、画像の無限ループではimgタグの指定に注意する必要があります。
もしデフォルトでmax-width: 100%;が指定してあると横幅がつぶれてしまうので、max-widthは無効化しましょう。

3. ホバーした際に無限ループを停止する方法

例えば画像リンクを無限ループさせているとき、画像をクリックするためにアニメーションの動きを止めたい場面があります。ここでは、ホバーした際に無限ループのアニメーションを停止する方法について解説します。

サンプル）https://mutablog.com/sample/css-infinite-loop.html#nav3

HTML

<ul class="infinite-list hover-paused">
	<li class="infinite-img-item">
		<img src="./common/images/image_infinite_01.png" alt="">
		<img src="./common/images/image_infinite_02.png" alt="">
		<img src="./common/images/image_infinite_03.png" alt="">
		<img src="./common/images/image_infinite_04.png" alt="">
	</li>
	<li class="infinite-img-item">
		<img src="./common/images/image_infinite_01.png" alt="">
		<img src="./common/images/image_infinite_02.png" alt="">
		<img src="./common/images/image_infinite_03.png" alt="">
		<img src="./common/images/image_infinite_04.png" alt="">
	</li>
	<li class="infinite-img-item">
		<img src="./common/images/image_infinite_01.png" alt="">
		<img src="./common/images/image_infinite_02.png" alt="">
		<img src="./common/images/image_infinite_03.png" alt="">
		<img src="./common/images/image_infinite_04.png" alt="">
	</li>
</ul>

infinite-list要素に、hover-pausedクラスを付与します。

CSS

.infinite-list.hover-paused {
  cursor: pointer; // ホバーしたらカーソルポインターにする
}
.infinite-list.hover-paused:hover li {
  animation-play-state: paused; // アニメーションの動きを停止
}

hover-paused要素をホバーしたら、hover-paused要素の子要素のアニメーションを停止させます。animation-play-state: paused;でアニメーションの動作を止めることができます。

ホバーの動作を分かりやすくするため、hover-pausedにはcursor: pointer;を指定して、ホバーした際にカーソルポインターになるようにしておくと親切でしょう。

まとめ

無限ループのアニメーションは手っ取り早くインパクトを高めてくれる便利なテクニックなので、ぜい使いこなしましょう。

CSS
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

mutaのアバター muta

Webデザイナーのmutaです。
当ブログでは主にWeb制作やITの知識について発信しています。

関連記事

目次