CSS/JS animationでh2の文章を表示させたい

前提・実現したいこと

CSSのanimationとkeyframesを使い、
JSのスクロールイベントで以下のh2の文章を、
スライドイン表示後にマスク部分がスライドアウトするアニメで表示させたいのですが、
h2がopacity:0のままで上手く表示されません。

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

chromeの検証ツールでの確認ですが、
エラーメッセージはでておりません。

該当のソースコード

HTML
1<head>
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3</head>
4
5<section class="moji">
6   <h2 class="moji-ani">これを表示させたい</h2>
7</section>

css
1  .moji {
2    max-width: 70vw;
3    margin: 300px auto;
4    text-align: center;
5    overflow: hidden;
6  }
7
8  .moji h2 {
9    font-size: 3.5vw;
10    opacity: 0;
11  }
12
13  @keyframes moji-anime {
14    from {
15      transform: translateX(-100%);
16    }
17
18    to {
19      transform: translateX(0);
20    }
21  }
22
23  @keyframes moji-mask {
24    from {
25      transform: translateX(0);
26    }
27
28    to {
29      transform: translateX(100%);
30    }
31  }
32
33  .moji-start {
34    animation-name: moji-anime;
35    animation-duration: .5s;
36    animation-fill-mode: forwards;
37    animation-timing-function: cubic-bezier(.42, 0, 1, 1);
38    position: relative;
39    opacity: 1 !important;
40  }
41
42  .moji-start::before {
43    animation-name: moji-mask;
44    animation-duration: .5s;
45    animation-delay: .5s;
46    animation-fill-mode: forwards;
47    animation-timing-function: cubic-bezier(.42, 0, 1, 1);
48    position: absolute;
49    content: '';
50    top: 0;
51    left: 0;
52    z-index: 1;
53    width: 100%;
54    height: 100%;
55    background: #666;
56  }

JAVASCRIPT
1
2  $(window).on('scroll', function() {
3
4    var elem = $('.moji h2');
5
6    elem.each(function() {
7
8      var mojistart = 'moji-start';
9      var elemOffset = $(this).offset().top;
10      var scrollPos = $(window).scrollTop() + (window.innerHeight/2);
11      if(scrollPos > elemOffset) {
12        $(this).addClass(mojistart);
13      }
14    });
15  });

試したこと

・スペルミスのチェック。

補足情報（FW/ツールのバージョンなど）

OS:win10 64bit
ブラウザ: Chrome

miyabi_pudding

2020/02/25 05:24

2点ほど。・if(scrollPos > elemOffset) { の中は通っているか・moji-startクラスを最初からつけていた場合にアニメーションするかこの二点をまずご確認ください。

Nogeira

2020/02/25 06:01

miyabi_takatsuk様御回答ありがとうございます。依頼を参考にしてみた所、無事解決しました。仰る確認事項が実に的確で、今回の原因は・if(scrollPos > elemOffset) { の中は通っているかに該当しておりました。手順的に 1.moji-startクラスの単体テスト 2.正常に思った通りのアニメーションで動作している 3.JSファイルの条件を確認 4.コンテナ部分のmarginの上下を広げて確認 5.スクロールで動作（解決）今後もデバッグに使える手順だと思います、大変参考になりました。回答にコメント頂ければベストアンサーをつけさせて頂きます。

miyabi_pudding

2020/02/25 06:13

いえいえ、解決されて何よりです。ここは質問修正依頼コメント蘭なので、回答ではございません。解決されたのであれば、自己解決の投稿をし、質問を閉じられるといいかと思います。

Lhankor_Mhy

2020/02/25 06:19

ご提示のコードを当方で試してみたところ、問題なく動作しました。つまり、問題が再現しません。 https://jsfiddle.net/Lhankor_Mhy/0h8r3beu/ ↑ こちらのコードはNogeiraさんの環境で問題が再現しますか？再現するのであれば、問題は環境にあるかもしれません。再現しないのであれば、問題が再現するコードをご提示ください。

Nogeira

2020/02/25 06:27

Lhankor_Mhy様わざわざ動作確認までして頂き、ありがとうございます。今回の原因は、コンテナのbottom部分のmarginが十分に取られていなかったため、発火部分が通過できていなかったようです。

Lhankor_Mhy

2020/02/25 06:29

ご解決されて何よりです。自己解決のご対応をお願いします。 https://teratail.com/help#resolve-myself