CSS3アニメーションの基本：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）（2/3 ページ）
エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。
なお、複数のCSSプロパティを変化させることも可能です。通常のAの状態では幅100pxなのを、マウスオーバしたBの状態のときに幅200pxに広げるようにします。a:hoverのセレクタに「width:200px;」を加え、「transition-property: background」の後ろにカンマを打って、「width」を追加します。
/*ボタンに対して何もしていない状態（A）*/
a{
display:inline-block;
color:#fff;
width:100px;
padding:10px;
text-align:center;
background:blue;
text-decoration:none;
/*アニメーション指定*/
transition-property: background, width;
transition-duration:1s;
transition-timing-function:ease-out;
transition-delay:0.5s;
}
/*ボタンに対してマウスオーバした状態（B）*/
a:hover{
background:red;
width:200px;
}
非常に簡単ですね。
しかし、このままでは、ブラウザの種類やバージョンによってはアニメーションが実行されません。なるべく多くのブラウザで動作するよう、transitionプロパティ全てに、ベンダプレフィックスを付けたものを追加します。
/*ボタンに対して何もしていない状態（A）*/
a{
display:inline-block;
color:#fff;
width:100px;
padding:10px;
text-align:center;
background:blue;
text-decoration:none;
/*アニメーション指定*/
/*Firefox向け*/
-moz-transition-property: background, width;
-moz-transition-duration:1s;
-moz-transition-timing-function:ease-out;
-moz-transition-delay:0.5s;
/*Chrome、Safari向け*/
-webkit-transition-property: background, width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease-out;
-webkit-transition-delay:0.5s;
/*Opera向け*/
-o-transition-property: background, width;
-o-transition-duration:1s;
-o-transition-timing-function:ease-out;
-o-transition-delay:0.5s;
transition-property: background, width;
transition-duration:1s;
transition-timing-function:ease-out;
transition-delay:0.5s;
}
/*ボタンに対してマウスオーバした状態（B）*/
a:hover{
background:red;
width:200px;
}
（3）animationの設定方法
次に、animationの設定方法を学びます。もう一度、AとBの状態を指定しただけのものにスタイルシートを戻します。
/*ボタンに対して何もしていない状態（A）*/
a{
display:inline-block;
color:#fff;
width:100px;
padding:10px;
text-align:center;
background:blue;
text-decoration:none;
}
/*ボタンに対してマウスオーバした状態（B）*/
a:hover{
background:red;
}
animationで指定できるのは、以下の6つです。
- アニメーション名
アニメーションの変化をまとめた記述に付ける名前
（例）animation-name:btn; - アニメーションしている時間の長さ（1回分）
Aの状態からBの状態に変化するのに何秒かけるか
（例）animation-duration:2s; - アニメーションの速度変化（イージング）
始めは素早く動くけれども、変化の終盤はゆっくり動くなど、変化する過程にどう抑揚を付けるか
（例）animation-timing-function:ease-out; - アニメーションを開始するまでの時間
マウスオーバなどのアクションがあってから、何秒経過してからアニメーションを始めるか
（例）animation-delay:0s; - アニメーションの繰り返し回数
アニメーションを何回繰り返すか。「infinite」で無限指定も可能
（例）animation-iteration-count:1; - アニメーションの繰り返し方法
アニメーションを、A→B、A→B……と一定方向に繰り返すか、またはA→B→A……と揺りかごのように反転して再生するか。反転再生のときは「alternate」を指定
（例）animation-timing-function:normal;
なお、これらは1つにまとめて指定できます。
（例）animation:btn 2s ease-out 0s 1 normal;
余談ですが、transitionでも同様にまとめて指定できる……はずなのですが、Firefoxで動作しないため、transitionでは個別にCSSプロパティを記載するようにしています。
さて、これを先ほどのtransitionとは逆に、Bの状態の方に記述します。
/*ボタンに対して何もしていない状態（A）*/
a{
display:inline-block;
color:#fff;
width:100px;
padding:10px;
text-align:center;
background:blue;
text-decoration:none;
}
/*ボタンに対してマウスオーバした状態（B）*/
a:hover{
/*アニメーション指定*/
animation:btn 2s ease-out 0s 1 normal;
background:red;
}
しかし、これだけでは動きません。
どのタイミングで何をアニメーションさせるかをまとめた「キーフレーム」というものも、スタイルシートの中に追加して設定する必要があります。次のように設定します。
@keyframes アニメーション名 {
0% { アニメーションさせたいCSSプロパティの初期状態 }
100% { アニメーションさせたいCSSプロパティ最終状態 }
}
今回、背景色を青から赤に変化させたいので、以下のように記述します。
@keyframes btn {
0% {background:blue;}
100% {background:red;}
}
また、A→Bの状態変化の間に、別の変化を差し挟むこともできます。青から赤に背景色が変化する途中で、黄色になるようにします。
@keyframes btn {
0% {background:blue;}
50% {background:yellow;}
100% {background:red;}
}
「50％」としている数字を小さくすれば、早く黄色になり、大きくすれば遅いタイミングで黄色になります。
Copyright © ITmedia, Inc. All Rights Reserved.