CSSだけで画像が流れるループアニメーションを作る

サービスサイトなどでよく見る導入企業のロゴ一覧をアニメーションで流す、みたいなことをCSSのみでやってみたいと思います。

サンプルで下のようにロゴが並んだような画像を用意します。(2000px * 100px)

htmlでアニメーションさせる枠を作ります。

<div class="slide">a</div>

cssで次のようにアニメーションさせます。
background-positionを変化させるアニメーションになります。

.slide {
    width: 100%;
    height: 100px; /* 画像の高さ */
    background-image: url(画像のパス);
    background-repeat: repeat-x;
    background-size: auto 100px; /* 画像の高さ */
    animation: loop 20s linear infinite;
}
@keyframes loop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -2000px 0; /* 画像のマイナス幅 */
    }
}

完成形

See the Pen Untitled by c-yoshi (@c-yoshi) on CodePen.

今回は横長の1枚画像を使用するパターンをご紹介しました。
シンプルなhtml構造とCSSのみで表現できるので、制限の多いCMSを使っている時などでも使える方法となっています。
画像サイズが頻繁に変更になる場合や、複数画像で対応したい場合などは下記の参考リンクの方法がいいかもしれません。

参考:

写真が画面の端から端へ流れる無限ループするアニメーション

\弊社では一緒に働いてくれる仲間を募集しております/

エントリーはこちらから▼

Related article

おすすめ関連記事