CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション

CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる

背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。

DEMO 表示

ー CODE ー

HTML

<section>
 <h1>BACK GROUND SCROLL</h1>
</section>

CSS

body {
 margin: 0;
 padding: 0;
}
section {
 height: 300px;
 margin: 100px 10px;
 background-image: url(bg.png);
 -webkit-background-size: 500px;
 background-size: 500px;
 -webkit-animation: bgscroll 25s linear infinite;
 animation: bgscroll 25s linear infinite;
}

h1 {
 height: 300px;
 line-height: 300px;
 color: #fff;
 text-align: center;
 font-size: 60px;
 font-family: impact;
 font-weight: normal;
}

@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -500px;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -500px;}
}