こんにちは、Ryohei(@ityryohei)です! 本記事では、メニューアイテムが順番に表示されるアニメーションの実装方法をご紹介しています。 今回実現したいこと 今回実現したいのは、ページ読み込み完了時にヘッダーやフッター、サイドといったメニューのアイテムがフェードインで表示されるアニメーションになります。スクリプトは使用せずに「CSS」だけで実装します。 完成すると下記デモのような表示となります。「RunPen」を押すとアニメーションが再生され、サイドメニューのメニューアイテムが上から順番にフェードインで表示されるかと思います。 See the Pen PooKVpd by ryohei (@intotheprogram) on CodePen. デモではサイドに設置したメニューを使用していますが、ヘッダーやフッターにも応用することができますので最終的にお好きな場所に実装していただ
![【CSS】メニューアイテムが順番に表示されるフェードインアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/df6a51f610746658c7d7dd7696aa820b5edee2b4/height=288;version=1;width=512/https%3A%2F%2Finto-the-program.com%2Fuploads%2Fmenu-item-fadein.jpg)