CSSのみでループして流れる画像を設置する方法

CSSアニメーションを利用して、横向きに永遠と流れる画像を設置する方法についてご紹介いたします。

挙動としては、こちらのページ下部にある、右から左へと流れているイラストのような動きになります。

CSSのみでループして流れる画像を設置する方法

まずはループ用の画像を用意します。今回はloop.pngという2000*350pxの画像を用意しました。

画像が用意できたら、CSSで背景画像としてループ画像を設置します。

.loop {
 background:url(images/loop.png);
 background-size: contain;
 width: 100%;
 height: 0;
 padding-top: calc( 350/2000*100% );
 -moz-animation: loop 100s linear infinite;
 animation: loop 100s linear infinite;
}

レスポンシブに対応させたかったので、「縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法」を使って実装しました。

「-moz-animation」と「animation」は、画像をループさせるアニメーション名等の指定です。この後、アニメーションを設定していきます。「100s」の秒数を変更すると、アニメーションするスピードが変わります(値が小さいほど速い)。

アニメーション部分は、以下のように記述します。

@keyframes loop {
 0% {background-position: 2000px 0;}
 25% {background-position: 1500px 0;}
 50% {background-position: 1000px 0;}
 75% {background-position: 500px 0;}
 100% {background-position: 0 0;}
}

@-moz-keyframes loop {
 0% {background-position: 2000px 0;}
 25% {background-position: 1500px 0;}
 50% {background-position: 1000px 0;}
 75% {background-position: 500px 0;}
 100% {background-position: 0 0;}
}

background-positionが、2000pxから0へと徐々に変化していくように設定しています。

全体をまとめると、以下のようになります。

.loop {
 background:url(images/loop.png);
 background-size: contain;
 width: 100%;
 height: 0;
 padding-top: calc( 350/2000*100% );
 -moz-animation: loop 100s linear infinite;
 animation: loop 100s linear infinite;
}

@keyframes loop {
 0% {background-position: 2000px 0;}
 25% {background-position: 1500px 0;}
 50% {background-position: 1000px 0;}
 75% {background-position: 500px 0;}
 100% {background-position: 0 0;}
}

@-moz-keyframes loop {
 0% {background-position: 2000px 0;}
 25% {background-position: 1500px 0;}
 50% {background-position: 1000px 0;}
 75% {background-position: 500px 0;}
 100% {background-position: 0 0;}
}

あとがき

一見JavaScriptを使わないと表現できなさそうなことも、CSSアニメーションを使えば実装できるようになりましたね。

横に流れるループ画像は、たまに見かけるので、自サイトにも実装してみたいという方はぜひ参考にしてみてください。