JavaScript - CSS + JavaScript でフェードイン・フェードアウトを実装する

CSS と Pure JavaScript だけでフィードインとフィードアウトを実装します。サンプルは以下のリンクで確認できます。

CodeSandbox

cocolog-fadein-fadeout

ソースコード

8行目の div の要素を対象に、フィードイン・フィードアウトを実装します。

index.html

CSS の animation を使って、徐々に opacity が適用されるようにします。

style.css

ボタンを押下時、対象要素のクラスを追加、削除できるようにします。このようにクラスを自由に付け替えることで、フィードイン・フィードアウトを再現します。

script.js