ふわっと下から浮き出るツールチップ：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（3）（3/3 ページ）
上手く使うことで画面をスッキリとさせられるツールチップ（吹き出し）。今回は、アニメーションするツールチップをCSSだけで作ってみます。
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サイト制作まで幅広くサポート。
Copyright © ITmedia, Inc. All Rights Reserved.