CSSで背景ループのアニメーションを実装する

背景画像を横方向にループで移動させたいという要望がたまにあるので、CSSのkeyframesで実装する方法をメモしておきます。

サンプルコード

#roopに背景画像のアニメーションを設定します。

HTML

<div id="roop"></div>

CSS

#roop {
	width: 100%;
	height: 540px;
	background: url(bg.jpg) repeat-x;
	background-position: 0 0;
	-webkit-animation: bgroop 20s linear infinite;
	animation: bgroop 20s linear infinite;
}
@-webkit-keyframes bgroop {
	from {
		background-position: 0  0;
	}
	to {
		background-position: -1956px 0;
	}
}
@keyframes bgroop {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -1956px 0;
	}
}

今回使用する背景画像の幅が1956pxなので、アニメーション完了時のbackground-positionの値が-1956pxになるように設定しています。
背景画像のループ移動のデモページ
縦方向に移動させたい場合もやり方は同じで、background-positionの2番目の値を設定すればOKです。