CSSで画像が無限ループするアニメーションを作成する方法【Web制作】

Webサイトを見てみると、上記のような画像やロゴなどが無限ループするアニメーションがついたサイトを見たことがあると思います。

このアニメーションですが、CSSの「@keyframes」を使うことで簡単に実装できますので、今回はその方法を紹介します。

HTMLコード例

    <div class="outer">
        <div class="inner">
            <img src="./img/img1.jpeg" alt="">
            <img src="./img/img2.jpeg" alt="">
            <img src="./img/img3.jpeg" alt="">
            <img src="./img/img4.jpeg" alt="">
            <img src="./img/img5.jpg" alt="">
            <img src="./img/img6.jpg" alt="">
            <img src="./img/img7.jpg" alt="">
            <img src="./img/img8.jpg" alt="">

            <img src="./img/img1.jpeg" alt="">
            <img src="./img/img2.jpeg" alt="">
            <img src="./img/img3.jpeg" alt="">
            <img src="./img/img4.jpeg" alt="">
            <img src="./img/img5.jpg" alt="">
            <img src="./img/img6.jpg" alt="">
            <img src="./img/img7.jpg" alt="">
            <img src="./img/img8.jpg" alt="">
        </div>
    </div>

HTMLのコードは「outer」クラスの中に「inner」クラスを作成し、その中にループして表示させたい画像（今回の場合は8個）を２ブロック並べている状態です。

CSSコード例

今回もSassを利用してコードを書いていきますので、Sassの環境構築がまだの方は、拡張機能を使って簡単にできますので、下記記事を参考にSassファイルが読み込めるように環境構築してみてください。

.outer {
    overflow: hidden;
}

.inner {
    display: grid;
    grid-auto-columns: 250px;
    grid-auto-flow: column;
    justify-items: center;
    animation: scroll 8s linear infinite;
    
    img {
        height: 160px;
    }
}

@keyframes scroll {
    to {
        translate: calc(250px * -8);
    }
}

overflow:hidden

このようになります。外側のクラス（今回は「outer」クラス）には「overflow:hidden」を設定します。これによって今回「inner」クラスに画像がスクロールして横に動いていくアニメーションをつけますが、「outer」クラスにはみ出した分は「overflow:hidden」により見えなくなるので、無限ループしているように見せることができます。

display:gird; grid-auto-columns, grid-auto-flow

「display:grid」「grid-auto-columns:250px」「grid-auto-flow: column」について解説します。

「display:grid」を設定することでグリッドレイアウトを使えるようになります。

「grid-auto-columns: 250px;」で1列の大きさ、今回であれば一つの画像が表示される横のサイズを250pxに指定しています。
ちなみに、画像の縦のサイズに関しては「img { height: 160px;」の部分で指定しています。

「grid-auto-flow: column;」を指定することでアイテムが横並びに配置されるように設定しています。

justify-items: center;

これによってアイテムが水平方向に中央に来るように設定しています。

@keyframes

この部分でどのような動きにするのかを決めています。

@keyframes アニメーション名 { from {最初の状態} to {最後の状態}}
一般的に@keyframesではこのように最初の状態から最後の状態までどのように変化させるのかを決めることができます。

今回は、fromを設定していないので画面表示される初期状態からtoまで変化させるように設定しています。

「 translate: calc(250px * -8);」ですので、「250px（1列のサイズ）× ８（今回ループさせる要素数）」px分「−８」ですので、左に移動させるという指定になります。

animation: scroll 8s linear infinite;

この部分ではアニメーションの速さや、種類、繰り返し回数を指定しています。

「animation: アニメーション名　時間　種類　繰り返し回数」のように指定しています。

今回であれば「@keyframes」で「scroll」というアニメーション名をつけたので「scroll」というアニメーションが
「8秒」で動き、「linear」ですので、一定の速さで動き、「infinite」なので無限に繰り返すという設定をしています。

「8s」の部分をもっと短くすれば画像のループ速度がもっと速くなりますし、「linear」の部分で「ease-in」を使えば、徐々に速度が上がる、といったようなアニメーションにもできますので、自分でいろいろ試してみてください。