CSS で背景画像をスライドアニメーションさせる方法

CSS で背景画像をスライドアニメーションさせる方法を紹介します。
例えば、jQuery系ライブラリーを使わない、シンプルなスライドアニメーションを実装したい時に便利な方法です。

背景画像スライドアニメーションの実装方法

CSS で背景画像をスライドアニメーションさせるには、CSS プロパティの animation を使用します。
次のコードは、「.bg_slide」に対して、行って戻ってを15秒かけて無限ループする、横スライドアニメーションの実装方法です。

実際の表示はこちら。

ベースのHTMLはこちら。

<div class="bg_slide"></div>

CSSはこちら。

.bg_slide {

  width: 100%;

  padding-top: 60%;

  background: url("https://hirashimatakumi.com/img/landscape1.jpg");

  background-size: cover;

	background-position: center center;

  animation: bg_slide 15s linear infinite;

}

@keyframes bg_slide {

    0% { background-position: left center;}

   50% { background-position: right center;}

  100% { background-position: left center;}

}

往復する時間はアニメーションの時間設定を変更してください。
表示エリアに対して背景画像のサイズに余裕がないとアニメーションが動作しないのでご注意ください。
縦スライドに変更する場合は、animation 内での設定値の background-position の値を変更してください。

無限スクロールの実装方法

最初に紹介した方法は往復するアニメーションでしたが、次に紹介するのは背景画像が一方通行でスクロールするアニメーションの実装方法です。
例えば、1500 x 500px の画像を左方向へのスクロールを繰り返すアニメーションを実装するには次のコードを利用します。

実際の表示はこちら。

CSSはこちら。

.bg_slide {

  width: 100%;

  padding-top: 500px;

  background: url("https://hirashimatakumi.com/img/landscape2.jpg");

  background-size: 1500px 500px;

  animation: bg_slide2 15s linear infinite;

}

@keyframes bg_slide {

    0% { background-position: 0 0;}

  100% { background-position: -1500px 0;}

}

この方法の注意点として、高さををピクセルで行う必要があります。
レスポンシブ対応する時でも高さの指定ができる状態でご利用ください。

まとめ

CSS　で背景画像をスライドアニメーションさせる方法を紹介しました。