スライドインした後にマスクがスライドイン、その後画像がフェードインするアニメーションをつくりたい

前提・実現したいこと

ページを下にスクロールしていくと、ボックスがスライドインで表示されその後、
グラデーションの要素がスライドアウトしてコンテンツが表示されるようにしています。

ボックスがスライドインで表示された後、重なり要素（マスク）がスライドアウトするアニメーションが完了た後、
画像を上からフェードインさせたいです。
ご教授いただければ幸いです。

参考ページ
https://into-the-program.com/slidein/

発生している問題・エラーメッセージ

Scrollreveal.jsを使い、上からフェードインするアニメーションを追加してみたところ
スライドインと同じタイミングでスライドイン
また、フェードインしない場合がある。

該当のソースコード

HTML
1<section id="home-itemList">
2        <section class="itemList-01">
3          <div class="itemListInner">
4            <div class="itemBox">
5              <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
6              <div class="itemnameBox">
7                <h2 class="category">タイトル1</h2>
8                <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
9              </div>
10            </div>
11          </div>
12        </section>
13<section class="itemList-02">
14          <div class="itemListInner">
15            <div class="itemBox">
16              <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
17              <div class="itemnameBox">
18                <h2 class="category">タイトル2</h2>
19                <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
20              </div>
21            </div>
22          </div>
23        </section>
24<section class="itemList-03">
25          <div class="itemListInner">
26            <div class="itemBox">
27              <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
28              <div class="itemnameBox">
29                <h2 class="category">タイトル3</h2>
30                <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
31              </div>
32            </div>
33          </div>
34        </section>
35</section>

CSS
1@charset "UTF-8";
2
3//itemListInnerをスライドインする
4@keyframes play {
5  from {
6    transform: translateX(-100%);
7  }
8  to {
9    transform: translateX(0);
10  }
11}
12
13
14//マスク要素をスライドアウト
15@keyframes maskOut {
16  from {
17    transform: translateX(0);
18  }
19  to {
20    transform: translateX(100%);
21  }
22}
23.isPlay {
24  animation-name: play;
25  animation-duration: 0.5s;
26  animation-fill-mode: forwards;
27  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
28  position: relative;
29  opacity: 1 !important;
30}
31
32.isPlay:before {
33  animation-name: maskOut;
34  animation-duration: 0.5s;
35  animation-delay: 0.5s;
36  animation-fill-mode: forwards;
37  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
38  content: "";
39  position: absolute;
40  top: 0;
41  left: 0;
42  z-index: 1;
43  width: 100%;
44  height: 100%;
45  background-image: linear-gradient(109.6deg, #f5e7d6 11.2%, #ffdca2 91.1%);
46}
47
48
49#home-itemList {
50  width: 100%;
51  height: auto;
52}
53#home-itemList .itemList-01 {
54  width: 100%;
55  height: 480px;
56  margin-bottom: 10%;
57}
58#home-itemList .itemList-01 .itemListInner {
59  width: inherit;
60  height: inherit;
61  background: #F5E7D6;
62  opacity: 0;
63}
64#home-itemList .itemList-01 .itemListInner .itemBox {
65  width: 100%;
66  display: flex;
67  justify-content: center;
68}
69#home-itemList .itemList-01 .itemListInner .itemBox .itemImage {
70  position: relative;
71  overflow: hidden;
72  top: -100px;
73  opacity: 0;
74  transition: 1s;
75}
76#home-itemList .itemList-01 .itemListInner .itemBox .itemImage.active {
77  opacity: 1;
78}
79#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox {
80  height: 480px;
81  display: flex;
82  flex-direction: column;
83  justify-content: center;
84  align-items: flex-start;
85}
86#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category {
87  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
88  color: #515151;
89  font-size: 4rem;
90  text-align: left;
91  margin: 0;
92  opacity: 0;
93}
94#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category span {
95  opacity: 0;
96}
97#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox p {
98  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
99  color: #515151;
100  font-size: 1.6rem;
101  line-height: 1.9;
102}
103

JavaScript
1$(function() {
2
3  $('.itemListInner').on('inview', function() {
4    var elem = $('.itemListInner');
5
6    elem.each(function() {
7
8      var isPlay = 'isPlay';
9      var elemOffset = $(this).offset().top;
10      var scrollPos = $(window).scrollTop();
11      var wh = $(window).height();
12
13      if (scrollPos > elemOffset - wh + (wh / 4)) {
14        $(this).addClass(isPlay);
15      }
16    });
17  });
18
19  $('.itemListInner').on('animationend', (e) => {
20    if (e.originalEvent.animationName === 'maskOut') {
21        $('.itemImage', this).addClass('active');
22    };
23  });
24
25});

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

関連した質問