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

[内田 順一，Chime of Shigan]

印刷

通知 連載「脱エンジニアっぽさ！ クライアントの笑顔を引き...」の新着をメールで通知

見るPost

Shareシェア

はてなブックマーク

SharePocket Button

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

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

• サンプル（その4）

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

/*アニメーションの内容*/
@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;}
}

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

• サンプル（その5）

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

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

@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/

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

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