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

脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(1):CSS3アニメーションの基本 (3/3)

[内田 順一,Chime of Shigan]
前のページへ 1|2|3       

 続いて、先ほどの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の動作の方が小気味良いと評価するケースもあるでしょう。

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

内田 順一(Chime of Shigan)

アートディレクター。広告、販促物の企画・制作を中心に「コサインスタジオ」名義でフリーランスとして長らく活動後、2007年に株式会社Chime of Shiganを立ち上げ。企業や商品のブランド構築を支援しながら、パンフやポスターなどの紙媒体から、ムービー、Webサイト制作まで幅広くサポート。

http://www.chimeofshigan.jp/


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。