CSSでじわっと画像を表示させる

ページの読み込みの遅さをCSSの効果でカバー

はじめに

背景画像や画像をじわっと表示させたいなと思い、できればCSSだけでやりたかったので、やってみました!

参考サイト

jQueryを使って実装する方法が過去には一般的でしたが、フェードインだけであればCSSだけで実装が可能です。現在このページもそのCSSが適用されていますので、ポワーンとフェードインでページが表示がされたと思います。更新する度にフェードインします。CSSだけでフェードインCSSbody{animat

背景をじわっと表示

イメージとしては背景画像の読み込みに時間がかかっていたので、背景画像をゆっくりじわっと表示させたかったのですが、じわっと出てくるのはコンテンツの方になります。

特定の画像をじわっと表示

写真やイラストなど、特定の画像をじわっと表示したい場合。

基本的にはbodyの指定と同じ感じ。
クラスを指定します。

おわりに

結構簡単です。
下記、デモページです。

DEMO コンテンツがじわっ(このページのリロード)
DEMO 画像ががじわっ