今回は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-widthやborder-colorという感じに。
1つずつ説明していきます、
○一つ目
animation-name
アニメーション名を指定するプロパティ、後述します。
○二つ目
animation-duration
アニメーション一回分の時間の秒数を指定するプロパティ
２秒にしたい時は「2s」、⑨秒なら「9s」
○三つ目
animation-timing-function
アニメーションが進行速度を指定するプロパティ
「ease」、「linear」など色々指定ができます。
○四つ目
animation-delay
アニメーションが始まるタイミングを指定するプロパティ
「5s」なら５秒経ってから開始、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すごい。