マウスオーバーで動き出す「からくりボタン」の作り方：脱エンジニアっぽさ！クライアントの笑顔を引き出すCSS3アニメーション（4）（3/3 ページ）

» 2013年11月19日 18時00分公開

[内田　順一，株式会社 Chime of Shigan]

3）CSS3アニメーションをもっと簡単に扱えるライブラリ

　さて、こうしたアニメーションの設定はさほど難しいものではありませんが、作り込みには時間がかかりますし、ベンダプレフィックスなどを付けるとソースが長大になってしまい、ちょっと管理が面倒です。そこで、これらをもっと手軽に扱うためのさまざまなオンラインツールやライブラリが提供されています。

　今回解説したような、ボタンに対するアクションをアニメーションで表現するには、「Animate.css」「magic」などのライブラリが簡単＆便利です。以下でそれぞれのライブラリのさまざまな動作サンプルを確認できます。


ツール名	URL
Animate.css	http://daneden.me/animate/
magic	http://www.minimamente.com/magic-css3-animations/

　利用の仕方はどちらもほとんど同じです。アニメーションが設定されたCSSファイルを読み込み、jQueryによってアニメーションの種類と動作のタイミングを指定します。それぞれ独特のアニメーションが用意されているので、利用したいアニメーションの種類によって両者を使い分けるとよいでしょう。

　ここでは、「magic」を用いて設定を解説します。

　初めに上記ページの「Download from GitHub」ボタンから、「magic.css」または「magic.min.css」を入手します。そして、以下のようにHTMLファイルの<head>～</head>内に読み込みます。

<link rel="stylesheet" href="magic.min.css">

【HTML】

　ボタンを作成します。灰色のシンプルなものにします。

<div class="animebtn">BUTTON</div>

【HTML】

.animebtn{
background:#666;
padding:24px 0 0;
width:200px;
height:50px;
text-align:center;
}

【CSS】

　jQueryを使って以下のように記述します。マウスオーバーしたときに、ボタンのclass「animebtn」に対し、magicで設定されている「magictime」「twisterInDown」を追加するわけですね。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$('.animebtn').hover(function () {
  $(this).addClass('magictime twisterInDown');
});
}) 
</script>

　たったこれだけでアニメーションを実装することができました。

サンプル（その4）

　ただ、このアニメーションの場合、すでにあったボタンが一度消えてからまた現れるという形になるので、ちょっと変です。

　なので、マウスオーバーする前のボタンと、した後のボタンをあらかじめそれぞれ用意します。マウスオーバー後のボタンは最初は透明にして見えなくしておき、マウスオーバーされたときに透明度をなくしてアニメーションをスタートさせ、マウスオーバーする前のボタンの上にかぶせるようにします。

　先の上下に開くシャッターのように、2つの<div>要素を用意し、リンク先を指定する<a>タグの中に入れます。

<a href="#" class="wholebtn">
	<div class="staticbtn">BUTTON</div>
	<div class="animebtn">BUTTON</div>
</a>

【HTML】

　これらの2つの<div>要素がかぶさるように、「position」プロパティの設定を行います。そのほか、ボタンの大きさなどの外観も指定します。

/*=======<a>タグのリンクボタン=======*/
.wholebtn{
position:relative;
display:block;
padding:24px 0 0;
width:200px;
height:50px;
color:#000;
border:1px solid #333;
}
/*=======マウスオーバー前／後共通のボタンデザイン=======*/
.wholebtn div{
position:absolute;
top:0;
left:0;
padding:24px 0 0;
width:200px;
height:50px;
text-align:center;
}

　「animebtn」の<div>要素は、マウスオーバー後に表示させるので、マウスオーバー前は透明に、マウスオーバー後は透明度なしに設定します。

/*=======マウスオーバー後のボタンデザイン=======*/
.animebtn{
background:#666;
opacity:0;
}
.animebtn:hover{
opacity:1;
}

　マウスオーバーする前に表示しておく「staticbtn」にも背景色を指定すれば完成です。

サンプル（その5）

/*=======マウスオーバー前のボタンデザイン=======*/
.staticbtn{
background:#ddd;
}

　アニメーション時間は初期値では1秒間となっていますが、CSSに追加して手軽に変更することもできます。

/*=======アニメーションの速度を速める=======*/
.magictime.twisterInDown {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}

　なお、magicはminifyされたファイルでも約250KBあり、そのままではちょっと重たいです。しかし、単独のCSSファイルに過ぎませんから、使っているセレクタ名の記述（ここでは「magictime」「twisterInDown」の部分）だけ抽出して利用できますね。

　このような洗練されたライブラリも取り入れつつ、CSS3のアニメーションで豊かなUIを追求してみましょう。