CSSでページのフェードイン
CSSでページのフェードインをさせる方法です。JQueryでフェードインする方法は別ページにまとめていますので、併せてご確認下さい。
CSSによるフェードインの使用例
～ 背景画像残しつつフェードイン ～
HTML
特別に記載する必要ありません。
<body>タグを利用します。
CSS
body {
animation: fadein 5s ease-out;
animation-iteration-count: 1;
}
@keyframes fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
背景画像を残しつつフェードインします。CSSで可能なフェードインはこの方法のみです。
JQueryと組み合わせて利用すれば背景「白」から背景画像も含めてフェードインさせることも可能です。こちらのページがその例です。