ランダムに現れる（CSS） | 動くWebデザインアイディア帳

最低限おぼえておきたい動き
-ランダムに現れる（CSS）-

See the Pen 4-11 ランダムに現れる（CSS） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

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

動きを実現する仕組み

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

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

HTMLの書き方

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

<div class="box fadeUp">ランダムに表示　ふわっ</div>
<div class="delay-time03 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-time03{
animation-delay: 0.3s;
}

.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);
  }
}