(cache)順番に現れる（CSS） | 動くWebデザインアイディア帳

最低限おぼえておきたい動き
-順番に現れる（CSS）-

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

CSS アニメーションで実現する順番に現れる方法です。
このサンプルは、画面を開いたらすぐに動きます。
スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。

①スタート時は要素自体を透過0 にするため、opacity:0; を指定する
.box{
opacity: 0;
}
②動かしたい動き（今回は” ふわっ” を採用）＋動きのスタートを遅らせるCSS animation-delay: 秒数の値;をあわせて指定します。
出現させたい要素の順番に遅延時間を増やしていくと順番に出現します。

HTMLの書き方

■2つ目以降の要素に遅延時間を指定するクラス名を付けます。

<div class="box fadeUp">順番に表示　ふわっ</div>
<div class="delay-time02 box fadeUp">順番に表示　ふわっ</div>
<div class="delay-time04 box fadeUp">順番に表示　ふわっ</div>

自作のCSS内の書き方


/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動き自体の指定：今回は「ふわっ」
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}