リスト型のナビゲーションなど、複数の要素が並列に配置されたUIで使えるアニメーションをjavascriptを使って実装してみたいと思います。今回は順番に連続して要素を動かすアニメーションのサンプルになります。いわゆるシーケンシャルな動きで最近のWebデザインでもよく見かけるかと思います。   まずはHTMLからです、今回はリスト要素で用意しました。親要素にはidを指定します。複数要素が対象の場合にはclassで指定するようにします。そして子要素には同じclass名をアニメーションさせる要素全てに付与しておきます。 【HTML】※一部抜粋

<ul id="sequential_animation">
 <li class="sequential_animation_item">First Element</li>
 <li class="sequential_animation_item">Second Element</li>
 <li class="sequential_animation_item">Third Element</li>
 <li class="sequential_animation_item">Fourth Element</li>
 <li class="sequential_animation_item">Fifth Element</li>
</ul>

  CSSではレイアウトや見た目のデザインを整えていきますが、初期状態では子要素をopacityで見えないようにし、transformで横もしくは縦方向に少し移動させておきます。また、アニメーションとして成り立つようにtransitionも設定しておきます。そして、表示状態のclassがついた時のスタイルとして、透明度と位置を表示されたときに見えるよう戻しておきます。 【Sass（scss）】

#sequential_animation {
  .sequential_animation_item {
   transition: all 0.5s linear 0s;
   transform: translate(-30px,0);
   opacity: 0;
    &.show {
     transform: translate(0,0);
     opacity: 1;
    }
  }
}

  アニメーション自体はCSSで実装しますが、シーケンシャルな動きはJavaScriptで制御していきます。まずは子要素全てのDOMを取得し、forEach()の中で処理を加えていきます。ここでポイントになるのが、forEachの第二引数になります。この第二引数ではindexの値を取得できます。それをsetTimeoutの値に入れることで、時間差で処理が行われるようになります。アニメーションのトリガーとしては、表示用のclass名を子要素に付与するだけのシンプルな内容になっています。 【javascript】

function sequentialAnimation() {
 const element = document.querySelectorAll('#sequential_animation');
 element.forEach((parentItems) => {
  const childElements = parentItems.querySelectorAll('.sequential_animation_item');
  childElements.forEach((parentItems, index) => {
   const order = index + 1;
   const delay = order * 500;
   setTimeout(() => {
    parentItems.classList.add('show');
   }, delay);
  });
 });
}
sequentialAnimation();

  これで順番に連続して要素を動かすアニメーションが実装できました。今回のサンプルはこちらに用意していますので参考に。  

See the Pen sequential_animation by designsupply (@designsupply) on CodePen.

 

---

  近年、ウェブサイトのデザインにもアニメーションが使われているのをよく見かけます。このようにCSSとjavascriptを組み合わせることで、アニメーションの表現も広がるのではないでしょうか。工夫次第ではいろんな動きも可能になるので、ぜひ試してみてください。