サイトを彩る多彩なアニメーション
フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。
ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき（マウスアウト時）の動きだ。
よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。
ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメーションにこだわるサイトも多い。
今回は「Omnisense」を参考に、CSS3とjQueryを使ったマウスオーバーアニメーションを作成する。
STEP 1：ベースになるボタンの作成
マウスオーバーすると色違いのボタンが上からスライドして下りてくるアニメーションを作成してみよう。
まず、ベースになるボタンを作成する。div要素「.btn」を用意し、ボタンとして表示する内容を内側のp要素でマークアップする。ボタンのサイズやボーダーなどのスタイルは、.btnに対して指定しておこう。
次に、マウスオーバー時のボタンを、div要素の内側にspan要素「.slide」として用意する。.slideは元のボタンの上部に接するようにCSSで配置し、マウスオーバー時のスタイルを指定しておく。親要素である「.btn」にoverflow: hidden;を適用すると、ボタンの高さからはみ出した「.slide」が非表示になり、ボタンの初期表示状態が完成する。
■ソースコード（HTML）
<div class="btn">
<p>Slide Down</p>
<span class="slide">Slide Down</span>
</div>■ソースコード（CSS）
.btn {
display: inline-block;
position: relative;
width: 200px;
height: 50px;
font-size: 12px;
font-weight: 400;
line-height: 50px;
text-align: center;
text-transform: uppercase;
border: 1px solid #00B6C1;
cursor: pointer;
overflow: hidden;
}
.btn p {
width: 100%;
height: 100%;
color: #00B6C1;
}
.slide {
position: absolute;
top: -100%; left: 0;
width: 100%;
height: 100%;
background: #00B6C1;
color: #FFF;
}STEP 2： アニメーション用のスタイルの定義
CSSの:hover擬似クラスではマウスアウト時のアニメーションを自由に設定できないので、アニメーション用の動きを定義するスタイルを別途用意し、マウスの状態に応じてjQueryでclass属性を切り替える。具体的には、アニメーション無しの状態（初期状態）に戻す「.reset」、マウスオーバー時の「.enter」、マウスアウト時の「.leave」の3つのclass属性を作成し、以下のように状態を定義しておく。
■ソースコード（HTML）
<div class="btn">
<p>Slide Down</p>
<span class="slide reset">Slide Down</span>
</div>
■ソースコード（CSS）
/* 初期化クラス */
.reset {
visibility: hidden;
-webkit-transition: none 0s ease 0s;
transition: none 0s ease 0s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* マウスホバーした時 */
.slide.enter {
-webkit-transition: -webkit-transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
transition: transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
/* マウスホバーが離れた時 */
.slide.leave {
-webkit-transition: -webkit-transform .15s ease-in-out 0s;
transition: transform .15s ease-in-out 0s;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
STEP 3：jQuery を使用してアニメーションを実装
STEP 2でアニメーションの準備ができたので、アニメーションを実行してみよう。jQueryにはアニメーションさせるためのanimateメソッドもあるが、今回は前に用意した3つのclass属性をマウスオーバーに合わせて付加または削除する。
以下のコードを記述すればマウスオーバーアニメーションの完成だ。
■ソースコード（JavaScript）
$(function() {
$('.btn').on({
mouseenter: function() {
// マウスオーバーした時
var $this = $(this);
$this.find('span').removeClass('reset leave').addClass('enter');
},
mouseleave: function() {
// マウスオーバーが離れた時
var $this = $(this);
$this.find('span').removeClass('reset enter').addClass('leave');
// アニメーション終了後 reset クラスで初期化
setTimeout(function() {
$this.find('span').removeClass('leave').addClass('reset');
}, 150);
}
});
});
