ボタンをクリックしたときにアニメーションさせる

ボタンをクリック（スマートフォンやタブレットではタップ）したときにアニメーションさせる方法を紹介します。フラットデザインやマテリアルデザインなどの場合、ボタンとの区別があまりなく、特にスマホなどのデバイスではマウスオーバーができないので、タップしたかどうかが分かりにくいことがあります。そのようなときにちょっとしたアニメーションがあるとユーザーにもクリック動作が分かりやすくなったりします。

CSSでアニメーションを作る

アニメーション自体はCSSを使って作っていきます。

//HTML
<button class="btn"><span>BUTTON</span></button>

//CSS
.btn {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  padding: 0 50px;
  background: #06a309;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height: 50px;
  overflow: hidden;
  transition: all 0.3s ease-in;
}
.btn:hover {
  background: #2abc27;
}
.btn:active span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left:-50px;
  content: "";
  background: #3bcc3b;
  border-radius: 100%;
  opacity: 0;
  animation: ripple 0.3s 1 ease-out;
}
@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0.0);
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

「.btn」は、単純にボタンのスタイルを作っているだけなので自由に設定してください。クリック時の動作に関しては、「:active」疑似クラスを使えばできます。ここでは、波紋のように広がっていくアニメーションを「::after」疑似要素を使ってつけています。要素の幅と高さの半分の値をmargin-topとmargin-leftにそれぞれマイナスの値で指定することで、要素の中心に持っていくことができます。そして、「border-radius: 100%;」を指定して正円を描くことができます。
あとは、「@keyframes」を使って、どのようにアニメーションが変化していくか設定すれば完成です。ここでは、最初は不透明度100％、拡大比率0で、最後は不透明度0％、拡大比率1で、徐々にアニメーションしていくようにしています。

クリックするとアニメーションが始まります。

「:active」疑似クラスが効かない場合

スマートフォンなどでは「:active」疑似クラスが効かないデバイスもあるでしょう。その場合は、javascriptを使ってアニメーションがつくようにします。

$(function() {
  var $touch = $(".btn");
  $touch.click(function() {
    $touch.addClass('active');
    setTimeout(function() {
    $touch.removeClass('active');
    }, 300);
  });
});

動きとしては、「.btn」をクリックしたら「active」というクラスを付与して、「setTimeout()」を使って0.3秒後にクラス「active」を取り除くという処理をしています。そして、CSSの指定を以下のように変更します。

.btn.active {
  background: #2abc27;
}
.btn.active::after {
  ～中身は先程と同じ～
}

これで、「:active」疑似クラスが効かないデバイスでも同じようにアニメーションを付けることができます。

以上が、ボタンをクリックしたときにアニメーションさせる方法となります。