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

[内田 順一，Chime of Shigan]

印刷

通知 連載「％」の新着をメールで通知

鬮ｫ遨ゑｽｹ譎｢�ｽ�ｽPost

Shareシェア

はてなブックマーク

SharePocket Button

　続いて、先ほどの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とで、同じアニメーション内容に設定したものを用意しましたので、以下からサンプルページをご覧ください。

• transitionで設定したアニメーション（別ウィンドウで開きます）
• animationで設定したアニメーション（別ウィンドウで開きます）

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

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

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

「第2回」へ

驍ｵ�ｺ髦ｮ蜻ｻ�ｿ�ｽ鬯ｨ�ｾ�ｽ�｣鬮ｴ莠･�ｳ�ｨ�ｽ蝣､�ｸ�ｲ驕抵ｿｽﾂ€�ｽ�｣鬮ｴ驛∵ｭ難ｿｽ�ｨ陋滂ｿｽ�ｽ�ｺ闕ｵ譏ｴ�樣Δ譎｢�ｽ�ｩ驛｢譎｢�ｽ�ｼ驛｢譎冗樟�つ€鬮ｦ�ｪ遶企ｦｴﾂ€蜈ｷ�ｽ�ｻ鬯ｪ�ｭ�ｽ�ｲ驍ｵ�ｺ陷ｷ�ｶ�ｽ�ｽ New

内田　順一（Chime of Shigan）

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

http://www.chimeofshigan.jp/

「脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション」バックナンバー

• マウスオーバーで動き出す「からくりボタン」の作り方
• ふわっと下から浮き出るツールチップ
• アニメーションで変化するタブ切り替え
• CSS3アニメーションの基本