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

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

はじめに

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

参考サイト

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

背景をじわっと表示

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


body {
	/* じわっと画像が表示される */
 	animation: fadeIn 1.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}

/* じわっと画像が表示される */
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}

/*古いブラウザ用*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

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

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

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


.delayed-image {
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

/* じわっと画像が表示される --------- 一度追加していたら不要*/
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}

/*古いブラウザ用 --------- 一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

おわりに

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

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

スポンサーリンク