難しいことはできないけど、ちょっとした動きを入れたいなぁ。
そんな時、マウススクロールでふわっと表示させてみてはいかがでしょうか。
ここでは、スクロールした時に要素が順番に表示される方法を紹介します。

まず、jQueryを導入してからお使いください。

↓以下が実際のソースサンプルです。

▼html

<div>
<p>下へスクロールしてください。</p>
</div>
    <p>ふわっと左から順番に表示されます</p>
<ul>
    <li id="img1"></li>
    <li id="img2"></li>
    <li id="img3"></li>
    <li id="img4"></li>
</ul>

▼css ※一部抜粋しています

body > ul {
    /*横並びはflexで指定*/
    display: flex;
}

li {
    /*デフォルトで透明度0に指定*/
    opacity: 0;
    transition: 2s;
}

/*スクロールした時に追加されるクラス*/
.fadein{
    opacity: 1;
}

▼JavaScript

$(window).scroll(function () {
    // クラスを追加するwindowの位置を設定
    var scrollTop = $(this).scrollTop();
    var scrollBottom = scrollTop + $(this).height();
    var effectPos = scrollBottom - 50;
    
    // eachでliを順番に処理
    $("li").each(function (i) {
        if(effectPos > $(this).offset().top){
            var that = this;

            // 0.2s毎にずれて表示
            setTimeout(function () {
               $(that).addClass("fadein");
            }, 200 * i);
        }
    });
});

今回の記事やデモページ作成にあたり
javascriptで順番に並んだ要素を連続して動かすシーケンシャルなアニメーション実装するさんのページを参考にさせていただきました。
ありがとうございます。

デモページは、こちら