連載
» 2013年09月24日 18時30分 公開

脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(3):ふわっと下から浮き出るツールチップ (3/3)

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

3)吹き出しのアニメーション

 表示させる要素が整ったところで、いよいよアニメーションを付けていきます。サンプルのように、下からふわっと浮き出る動きを設定します。

 まず、アニメーションの内容から指定します。

/*アニメーションの内容*/
@keyframes bubbleUp {
0% {bottom:15px; opacity:0;}
100% {bottom:25px; opacity:1;}
}

 アニメーションの開始時点(0%)では、「bottom:15px;」の位置に置き、「opacity:0;」で完全に透明な状態にして消しておきます。

 アニメーションの終了時点(100%)では、マウスオーバした際の位置指定と同じく「bottom:25px;」とし、「opacity:1;」で透明度をなくします。そして、これに「bubbleUp」という名前を付けます。

 さらに、マウスオーバした際のセレクタ「a.tooltip:hover span」に対して、アニメーションの制御指定をします。

 アニメーションの開始から終了までの時間を0.2秒にし、アニメーションは1回だけ(=繰り返さない)とします。

a.tooltip:hover span{
……
/*アニメーションの制御設定*/
animation: bubbleUp 0.2s 1;
}

 動きが気に入ったら、これら@keyframesやanimationの設定をベンダプレフィックスを付けて増やし、多くのWebブラウザで動作するようにします。

a.tooltip:hover span{
……
/*アニメーションの制御設定*/
-moz-animation: bubbleUp 0.2s 1;
-webkit-animation: bubbleUp 0.2s 1;
-o-animation: bubbleUp 0.2s 1;
animation: bubbleUp 0.2s 1;
}
/*アニメーションの内容*/
@-moz-keyframes bubbleUp {
0% {bottom:15px; opacity:0;}
100% {bottom:25px; opacity:1;}
}
@-webkit-keyframes bubbleUp {
0% {bottom:15px; opacity:0;}
100% {bottom:25px; opacity:1;}
}
@-o-keyframes bubbleUp {
0% {bottom:15px; opacity:0;}
100% {bottom:25px; opacity:1;}
}
@keyframes bubbleUp {
0% {bottom:15px; opacity:0;}
100% {bottom:25px; opacity:1;}
}

 その他の動きも試してみましょう。クエスチョンマークから吹き出しが飛び出してバウンドするようなアニメーションにします。

 一度大きく飛び出してから着地したものの、勢い余って少し弾んでしまい、その後に静止するという動きになっています。

 それには、次のように設定します。

@keyframes bubbleUp {
0% {bottom:0px; opacity:0; transform: scale(0,0);}
40% {bottom:45px; opacity:1; transform: scale(1.15,1.15);}
60% {bottom:25px; opacity:1; transform: scale(1,1);}
80% {bottom:30px; opacity:1; transform: scale(1.05,1.05);}
100% {bottom:25px; opacity:1; transform: scale(1,1);}
}

 単純に透明度と上下の位置を移動するだけでなく、「transform: scale()」を使ってサイズも変更しています。( )内はカンマで区切って、1を等倍とした横の拡縮比、縦の拡縮比を順に指定します。

 さらに、アニメーションの制御設定も行います。

a.tooltip:hover span{
……
/*アニメーションの制御設定*/
animation: bubbleUp 0.3s ease-in-out 1;
}

 アニメーション時間を0.3秒とやや長くし、アニメーションの速度を遅い → 速い → 遅いと緩急を付けるease-in-outを指定しました。

 一般的にはちょっと大げさな動きかもしれませんが、元気さや躍動感を売りにしたいWebサイトや、ある程度強く注意を喚起したい場合などは、こうしたアニメーションにしてみても良いですね。

内田 順一(Chime of Shigan)

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

http://www.chimeofshigan.jp/


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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