はじめに
背景画像や画像をじわっと表示させたいなと思い、できればCSSだけでやりたかったので、やってみました！
参考サイト
jQueryを使って実装する方法が過去には一般的でしたが、フェードインだけであればCSSだけで実装が可能です。現在このページもそのCSSが適用されていますので、ポワーンとフェードインでページが表示がされたと思います。更新する度にフェードインします。CSSだけでフェードインCSSbody{animat
背景をじわっと表示
イメージとしては背景画像の読み込みに時間がかかっていたので、背景画像をゆっくりじわっと表示させたかったのですが、じわっと出てくるのはコンテンツの方になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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の指定と同じ感じ。
クラスを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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} } |
おわりに
結構簡単です。
下記、デモページです。
