【CSS3】CSS3でフェードイン、フェードアウトを表現してみる




今回はCSS3の新機能を使って、
フェードイン!その後フェードアウト!
的なものを作る方法などを紹介してみます。






CSS3ロゴ

使うのは、新しく備わった2つの機能。

要素の透明度を指定する「opacity」

アニメーションを指定する「animation」
です。

まず、opacity の方から。

こっちはとっても簡単、opacityプロパティの後ろに0~1の数値を指定するだけです。
1が透過ナシで0が全透過ですね。



○使ってみるとこんな感じになります。





opacity:1






opacity:0.5






opacity:0.3






opacity:0





次は、animation の方。
こっちは割とややこしいのでしっかり覚えましょう。

animationプロパティは6つのプロパティと組み合わせて使う必要があります。
既存のもので例えると、border
border-widthborder-colorという感じに。

1つずつ説明していきます、


○一つ目
 animation-name
 アニメーション名を指定するプロパティ、後述します。

○二つ目
 animation-duration
 アニメーション一回分の時間の秒数を指定するプロパティ
 2秒にしたい時は「2s」、⑨秒なら「9s」

○三つ目
 animation-timing-function
 アニメーションが進行速度を指定するプロパティ
 「ease」、「linear」など色々指定ができます。

○四つ目
 animation-delay
 アニメーションが始まるタイミングを指定するプロパティ
 「5s」なら5秒経ってから開始、0ならすぐ開始

○五つ目
 animation-iteration-count
 アニメーションの繰り返す回数を指定する
 繰り返す数を入れる。「infinite」にすると無限ループ

○六つ目
 animation-direction
 アニメーションの繰り返し方法を指定するプロパティ
 「normal」なら普通に繰り返す、「alternate」だと終わったら逆再生する



以上です、長いです。

いっぺんに指定することもできますが、
今回はひとつずつ指定していきます。




	animation-name: 'anime';
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-direction:alternate;





これで終わり…と思おもいきや、実は肝心な事が抜けています、
animation-name: 'anime'; ←
ここで指定している'anime'という名前になっている
アニメーションの内容を用意しないといけません。



@keyframes 'anime1' {
0% {width: 50px;}
100% {width: 200px;}
}





これで"anime"という名前のアニメーションが用意できました。
内容は、
0%(開始時)に横幅が50px
100%(終了時)に横幅が200px
といった感じです。

実際の動作はこんな感じ。






さて、以上でフェードイン、フェードアウトを作る為に必要な説明は終わりました。

アニメーションの開始を透過度1、終わりを透過度0にしてあげればいいだけですね。






○ソースコード


div.sample{
	float:left;
	width:50px;
	height:40px;
	background:url('画像のURL');
	animation-name: 'anime';
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-delay:0;
	animation-iteration-count: infinite;
	animation-direction:alternate;
}

@keyframes 'anime' {
	0% {	opacity:1;	}
	100% {	opacity:0;	}
}





アニメーションのあたりがちょっとややこしいですが、
かなりサックリ実装できますね、CSS3すごい。


関連記事

コメントは受け付けていません。