じわっ（CSS） | 動くWebデザインアイディア帳

最低限おぼえておきたい動き
-じわっ（CSS）-

See the Pen 4-6 最低限覚えておきたい現れ方 - じわっ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

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

動きを実現する仕組み

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

※IE 非対応。
MAC のFirefox ではBlur を広い面積で使用すると、表示が遅くなります。

HTMLの書き方

■HTMLの要素は自由です。

<div class="blur">ぼかしから出現</div>

自作のCSS内の書き方

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}