要素を順番にアニメーションさせる方法【CSS,JS】

#順番にアニメーションさせる。
この記事では、javascript(ES6)を使い要素に順番にアニメーションさせるソースの紹介しています。

##完成形
最初に完成形を見せておきます。

See the Pen for animation by wd30gsrc (@wd30gsrc) on CodePen.

##HTML
まずはhtmlから

index.html

<ul class="list">
  <li class="item">BOX_01</li>
  <li class="item">BOX_02</li>
  <li class="item">BOX_03</li>
  <li class="item">BOX_04</li>
  <li class="item">BOX_05</li>
</ul>

##CSS
.itemは最初、opacity:0で非表示にさせて、jsで.activeクラスをあとから付ける。

style.css

.list {
  display: flex;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 3px;
  text-align: center;
  line-height: 100px;
  opacity: 0;
  transition: all 1s;
}
.active {
  opacity: 1;
}

##js
今回は即時関数を使っています。
実際に使用する場合はスクロールイベント等で要素が見えたときに動くようにすることが多いかと思いますが、そこは適宜調整が必要です。

app.js

(()=> {
  const items = document.querySelectorAll('.item');
  items.forEach((item,index)=> {
    const order = index + 1;
    const delay = order * 300;
    setTimeout(()=> {
      item.classList.add('active');
    }, delay);
  });
})();

以上です。