Published on

CSSを使ってふわっと順番に出てくるナビゲーションを作ってみる

Authors

いろんなサイトを見ているとナビゲーションの要素が順番にふわっと出てくるアニメーションを使っているサイトがいくつかあったので、

こんな感じのやつ

navigation_animation

今回はこれに似たものを作っていきたいと思います。

やることは 2 つ

  1. 大枠を作る
  2. コンテンツを順番に表示するアニメーションを追加

それではやっていきます。

1. 大枠を作る

はじめにアニメーションを実装する前にナビゲーション本体を作っていきます。
今回はナビゲーションの表示非表示を制御するために React を使ってみました。
React はメニューの表示、非表示を state で管理するのに利用しているだけで、JQuery などでも簡単に実装できると思います。

実装自体はこんな感じ(※ 全画面表示の想定です)

ナビゲーション本体は position: fixed で top, left, right, bottom を 0 にして全画面表示できるにようにしています。

2. コンテンツを順番に表示するアニメーションを追加

続いて本題のアニメーションです。
先程定義したliタグに対して順番に表示されるアニメーションを追加していきます。

2-1. keyframe で fadeIn のアニメーションを追加

アニメーションをどういった動きにしたいかは keyframe で定義していきます。
今回だと非表示から徐々に表示していくようなアニメーションなので

  • スタートは opacity を 0 に
  • ゴールは opacity を 1 に

していきます。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

2-2. li タグに animation property を追加

では作成したアニメーションの定義を実際に li タグに反映させていきます。

ul li {
  ....
  /* 追加部分 */
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 1s; /* アニメーションの長さ */
  animation-fill-mode: forwards; /* アニメーション終了時のスタイルをアニメーション終了後でも適用させる */
}

animation-name は先程定義したfadeInですね。
特に注目する点は animation-fill-mode で fowards を定義している部分です。
これを追加しないとアニメーションが完了した後に opacity がまた 0 に戻ってしまい、list が消えてしまいます。
fowards を入れることでアニメーション完了時も style を維持させることができます。

2-3. li タグの順番によって animation を遅らせる

最後にリストを順番にふわっと表示していきたいので、
N 番目の要素のアニメーションを遅らせる処理を追加していきます。

N 番目の要素は CSS で <tag name>:nth-child(N) というものがあって、指定した要素の N 番目にスタイルを当てるみたいなことができます。 なので今回のケースだと

ul li:nth-child(1) {
  animation-delay: 0.15s;
}
ul li:nth-child(2) {
  animation-delay: 0.3s;
}

のような書き方にすれば要素の表示されるタイミングを遅らせることができるので順番に表示されるように見えます。

最終的なコードはこちら！

以上です！
少しでも参考になれば嬉しいです！

Discuss on Twitter • View on GitHub