CSS3アニメーションの基本：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）（2/3 ページ）

エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。

[内田 順一，Chime of Shigan]

　なお、複数の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;
}

【CSS側】

　非常に簡単ですね。

　しかし、このままでは、ブラウザの種類やバージョンによってはアニメーションが実行されません。なるべく多くのブラウザで動作するよう、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;
}

【CSS側】

（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;
}

【CSS側】

　animationで指定できるのは、以下の6つです。

1. アニメーション名
   アニメーションの変化をまとめた記述に付ける名前
   （例）animation-name:btn;
   
2. アニメーションしている時間の長さ（1回分）
   Aの状態からBの状態に変化するのに何秒かけるか
   （例）animation-duration:2s;
3. アニメーションの速度変化（イージング）
   始めは素早く動くけれども、変化の終盤はゆっくり動くなど、変化する過程にどう抑揚を付けるか
   （例）animation-timing-function:ease-out;
4. アニメーションを開始するまでの時間
   マウスオーバなどのアクションがあってから、何秒経過してからアニメーションを始めるか
   （例）animation-delay:0s;
5. アニメーションの繰り返し回数
   アニメーションを何回繰り返すか。「infinite」で無限指定も可能
   （例）animation-iteration-count:1;
6. アニメーションの繰り返し方法
   アニメーションを、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;
}

【CSS側】

　しかし、これだけでは動きません。

　どのタイミングで何をアニメーションさせるかをまとめた「キーフレーム」というものも、スタイルシートの中に追加して設定する必要があります。次のように設定します。

@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％」としている数字を小さくすれば、早く黄色になり、大きくすれば遅いタイミングで黄色になります。