ページ遷移時にアニメーションをつける｜KojimaKohei

お洒落なサイトでよく実装されているのが、「ページ遷移時のアニメーション」ですね。 例えば、企業のアイコンを表示させたり、画面をスライドさせたり、フェードインさせたり、様々なアニメーションをつけてユーザーを飽きさせないようにしてます。 （あまりやりすぎてるサイトは離脱率が上がりそうですが） jQueryのプラグインで有名どころとしてはANIMSITIONですね。 今回は、プラグインを使用せず、ページ遷移時のアニメーションを実装してみます。 参考にしたサイト、は記事最下部にリンク貼っておきます。 ページ遷移時のアニメーションまずは、デモを御覧ください。 → デモサイト こんな感じで、LINKをクリックした時にアニメーションが走るようになっています。 ページ読み込み時にも時間差でアニメーションを実行させると、見栄えが良さそうですね。 ざっくりこれからやることを説明しておくと、 bodyの擬似要素