※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

CSS3の機能を使って画像をフェードインさせたりする方法を紹介したいと思います。色々なものをフェードインさせたりできるのだろうかという挑戦もかねて作っていきます。6月9日

目次




まずは簡単なサンプルから

こちらの画像をフェードインさせたりフェードアウトさせたりしてみます。
イメージ

まずはこんな感じに1~3をいったり来たりを作ってみる。

コード

HTML部

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>opacity+フェードインとフェードアウト</title>
</head>
<body>
<div class="fadein">
</div>
</body>
</html>

CSS部

@charset "utf-8";
/* CSS Document */

div.fadein{
	float:left;
	width:400px;
	height:266px;
	background:url('flower.png');
	border:1px solid #000;
	
	-ms-animation-name: anime1;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction:alternate;


	-o-animation-name: anime1;
	-o-animation-duration: 3s;
	-o-animation-timing-function: ease;
	-o-animation-iteration-count: infinite;
	-o-animation-direction:alternate;
	
	-webkit-animation-name: anime1;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate;	

	-moz-animation-name: anime1;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction:alternate;
}

@keyframes 'anime1' {
	0% {	opacity:1;	}
	100% {	opacity:0;	}
}
@-webkit-keyframes anime1 {
	0% {	opacity:1;	}
	100% {	opacity:0;	}
}
@-moz-keyframes anime1 {
	from {	opacity:1;	}
	to {	opacity:0;	}
}
@-o-keyframes anime1 {
	from {	opacity:1;	}
	to {	opacity:0;	}
}
@-ms-keyframes anime1 {
	from {	opacity:1;	}
	to {	opacity:0;	}
}

非常に長くなってしまいますが、ベンダープレフィックスを付けていきました。 それぞれの説明です。

プロパティ名 説明 初期値 その他の値
animation-name あとに書くkeyframeの名前 none アニメーション名
animation-duration 一回分の時間の長さ 0 5秒なら5s
animation-timing-function アニメーションのタイミング・進行割合を指定 ease linear,ease-in,iase-out,ease-in-outなど
animation-delay アニメーションがいつ始まるかを指定 0 1秒なら1s
animation-iteration-count アニメーションの繰り返し回数 1 2,3・・無限なら infinite
animation-direction アニメーションを交互に反転再生させるかどうかの指定 normal alternate(奇数回は再生方向、偶数会は逆再生方向)



その他 opacity透明度 0は完全に透明、1は完全に不透明。初期値は1。

画面いっぱいの背景画像をフェードインさせてみる。

挑戦してみましたが、だめでした。以下取組履歴(dt,ddのwiki文法を書いているのですが、少し見にくくてすみません。いつかCSSを変えます。)

背景画像をブラウザいっぱいに表示しているCSS記述方法のものをフェードインフェードアウトできるのか?
背景画像はフェードインフェードアウトできなかったが、そのほかはフェードインフェードアウトした。body部分はだめだったので、次の取り組み
上記のbody内に#body_wrapperを作ってみた。
だめだった。


もっと小さく考えてみた。

divボックスで、widthやheightをパーセント指定で作ってみた。
だめだった。
widthやheightをピクセル指定で作ってみた。
できた。というより最初の取り組みと同じ。


環境:firefox38.0.5(記事執筆時最新バージョン)で試してみました。

どうやらフェードイン、フェードアウトは 幅や高さがピクセル指定の時のみできるそうです。

参考サイト

  1. 【CSS3】CSS3でフェードイン、フェードアウトを表現してみる
  2. CSS3リファレンス
添付ファイル