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アニメーションの基本