ループし続けるCSSアニメーション

HTMLCSSアニメーション

横スクロールで街並みを永遠に走っているようなイメージのCSSアニメーション

.site-footer	{
	position: relative;
	height: 22rem;
	background: url( images/bg-scroll.png ) ;
	background-position: center;
	/* 画像のサイズを指定する */
	-webkit-background-size: 1600px 220px;
	 background-size:  1600px 220px;
	/* アニメーション名 , アニメーションの時間 , アニメーションのタイミング , アニメーションの繰り返し */
	 -webkit-animation: bgscroll 20s linear infinite;
	 animation: bgscroll 20s linear infinite;
}
#footer-content	{
	position: absolute;
	left: 35%;
	bottom: 30px;
}
@-webkit-keyframes bgscroll	{
	0% { background-position: 0 0; }
	100% { background-position: -1600px 0; }
}
@keyframes bgscroll	{
	0% { background-position: 0 0; }
	100% { background-position: -1600px 0; }
}

画像サイズなど、サイトに合わせてキッチリ調整しないと変な感じになる。