jQueryとCSSを組み合わせて「動くきっかけを指定して動かす」方法を理解します。
基本的な考え方
動くきっかけを指定するには、HTML内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け（クラス名は自由に設定可能です）、jQuery側で動くきっかけの動作（スクロールなど）をしたら、アニメーション用のCSSのクラス名が付与されるという指定をします。
１）HTML内の動かす要素に「動くきっかけの起点となるクラス名」を付ける
まず、「ふわっ」という動くきっかけの起点となるクラス名を「fadeUpTrigger」と付けます。すでにクラス名が記述されているときには、クラス名の前に半角スペースを入れます。
また、「動くきっかけの起点」に到達するまで要素が出現しないようにするには、「fadeUpTrigger」に「透過0（opacity:0;）の指定を書きます。
●クラス名の付与
<p class=”box fadeUpTrigger”></p>
●動くきっかけの起点となるクラス名に「透過0（opacity:0)」の指定
.fadeUpTrigger{
opacity: 0;
}
２）jQuery側で動くきっかけの動作（スクロールなど）を指定する
●jQueryと自作のJavaScriptファイルを読み込む
</body>タグの直前に、以下のようにjQueryと自作のJavaScriptファイルを読み込む指示を記述します。
●jQueryと自作のJavaScriptファイルを読み込む指示
<!– 1.jQuery –>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>
<!– 2.自作のJavaScript –>
<script src=”js/script.js”></script>
</body>
●jQueryを使ってアニメーションするCSSのクラス名を付与
自作のJavaScriptファイル内に「動くきっかけの起点となるクラス名(fadeUpTrigger)」に「動くきっかけ（スクロールなど）」で「アニメーションをするCSSのクラス名が付与（fadeUp）」されるように指定します。
３）アニメーション用のCSSのクラス名が付与されてアニメーションが発動する
●動くきっかけ（スクロールなど）でアニメーションを指定したCSSのクラス名が付与される
<p class=”box fadeUpTrigger fadeUp“></p>
※クラス名「fadeUp」がjQuery側で付与される。
●jQueryで付与されたアニメーション用のCSSのクラス名（fadeUp）には「透過していた要素を下から出現」する指定を行う
.fadeUp{
animation-name: fadeUpAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes fadeUpAnima{
from{
opacity:0;
transform:translateY(100px);
}
to{
opacity:1;
transform:translateY(0);
}
}
