CSS で背景画像をループアニメーションさせる方法

CSS で背景画像をループアニメーションさせる方法を紹介します。
例えば、背景画像に動きのアクセントを加えたいときに便利な方法です。

背景画像をループアニメーションさせる方法

CSS で背景画像をループアニメーションさせるには、CSS プロパティの animation を使用します。
次のコードは、body に対して横100px高さ100pxの画像を、無限ループで右上から左下へ5秒かけてアニメーションさせる方法です。

body {

  background: url("img/sample.gif");

  animation: bgiLoop 5s linear infinite;

}

@keyframes bgiLoop {

    0% { background-position: 0 0;}

  100% { background-position: -100px 200px;}

}

表示速度を変更したい場合は 5s（五秒）の値を変更します。
動かす方向を変更したい場合は、keyframes の開始位置と終了位置の background-position の値を変更してください。

綺麗なループアニメーションを実現する場合には、
初期位置から画像のサイズ分、範囲外に画像を移動させるのがコツです。

違う動きのアニメーションを複数設置する場合は、キーフレーム名（例：bgiLoop）を変更してください。

まとめ

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