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

» 2013年07月04日 17時00分公開

[内田　順一，Chime of Shigan]

　続いて、先ほどのtransitionと同じように、背景色と同時に幅も変更するようにします。ボタンにマウスオーバしたBの状態に「width:200px;」を加え、キーフレームの設定にも幅の指定を追加します。

/*ボタンに対して何もしていない状態（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;
    width:200px;
}
@keyframes btn {
0% {background:blue; width:100px;}
100% {background:red; width:200px;}
}

　また、このアニメーションに対応するブラウザやそのバージョンを広げるため、animationプロパティを使って設定しているものは、ベンダプレフィックスを付けてコピーします。

/*ボタンに対して何もしていない状態（A）*/
a{
    display:inline-block;
    color:#fff;
    width:100px;
    padding:10px;
    text-align:center;
    background:blue;
    text-decoration:none;
}
/*ボタンに対してマウスオーバした状態（B）*/
a:hover{
    /*アニメーション指定*/
    -moz-animation:btn 2s ease-out 0s 1 normal;
    -webkit-animation:btn 2s ease-out 0s 1 normal;
    -o-animation:btn 2s ease-out 0s 1 normal;
    animation:btn 2s ease-out 0s 1 normal;
    background:red;
    width:200px;
}
@-moz-keyframes btn {
0% {background:blue; width:100px;}
100% {background:red; width:200px;}
}
@-webkit-keyframes btn {
0% {background:blue; width:100px;}
100% {background:red; width:200px;}
}
@-o-keyframes btn {
0% {background:blue; width:100px;}
100% {background:red; width:200px;}
}
@keyframes btn {
0% {background:blue; width:100px;}
100% {background:red; width:200px;}
}

　これで設定完了です。

　transitionとanimationとで、同じアニメーション内容に設定したものを用意しましたので、以下からサンプルページをご覧ください。

　これらで1点異なるのは、マウスをボタンから離したときの動作です。transitionではBの状態からAの状態へと反転しながら戻るのに対し、animationではパッと元のAの状態に切り替わります（animationでも設定を重ねれば反転して戻すこともできますが、あくまで基本的な設定での比較です）。

　アニメーションとしては、transitionの方がリッチに感じられていいように思いますが、場合によっては、animationの動作の方が小気味良いと評価するケースもあるでしょう。

　先ほど、設定できるアニメーションの複雑さ、設定の容易さで比較しましたが、小さなことながら、こうした違いもユーザー体験に関わってきますので、どちらで設定するかの判断に加えたいものです。

「第2回」へ