クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

インタラクティブなサイトやWebサービスだとユーザーの入力した内容に誤りがあるときなどにボタンをガタガタ揺らすという演出をしているところがあります。

細かい演出ですが、ただエラーメッセージを出すよりもユーザーに対してエラーを伝えやすくなります。

ここではそのようなボタンをガタガタさせる演出をCSSのアニメーションプロパティとjQueryを実装する方法を解説します。

ガタガタするアニメーションの作り方

上下左右にガタガタ動くようなアニメーションを要素で実行するにはCSS3で追加されたanimation関係のプロパティを使います。

例えば次のようなボタン要素があるとします。

<button id="btn" class="shake_btn">ボタン</button>

このボタンに対してガタガタ動くようなアニメーションを作るには次のCSSを適用します。

.shake_btn
{
  animation-name: shake;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
    
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 6px;
  width: 150px;
  font-weight: bold;
}

@keyframes shake
{
  from{
    transform: translateX(-5px);
  }
  
  50%{
    transform: translateX(10px);
  }
  
  to{
    transform: translateX(-5px);
  }
}

このCSSを適用したボタンには次のように左右にガタガタ震えるアニメーションが付きます。

ボタン

まずこのCSS内でアニメーションを作っているのは@keyframesでfromブロックの中で開始時の要素のCSS、toブロックの中で終了時の要素のCSSを定義しています。fromとtoブロックの間には０％～１００%の範囲でいくらでもブロックを追加できます。

またこの例ではtransformプロパティで移動関数を渡すことで要素を移動させています。移動関数には左右に移動させるtranslateX関数と上下に移動させるtranslateY関数があります。例えば左に5px、上に10px動かしたい場合はtransformプロパティに次の関数を渡します。

transform: translateX(-5px) translateY(10px);

そして@keyframesで定義したアニメーションを要素に適用しているのが次の部分です。

animation-name: shake;
animation-duration: 0.2s;
animation-iteration-count: infinite;

各アニメーションプロパティは次のような役割を持ちます。

• animation-name
  要素で実行したい@keyframesで定義したアニメーション名を渡す
• animation-duration
  １回当たりのアニメーションの実行時間。0.2sは0.2秒を表す
• animation-iteration-count
  アニメーションを何回実行するかの回数を渡す。「infinite」を渡すとループする

この例ではshakeというアニメを１回当たり0.2秒で無制限に再生するという動作になります。

またアニメーションプロパティはブラウザのバージョンによっては対応していないものもあるので各プロパティの前に「-moz-」や「-webkit-」や「-o-」などのベンダープレフィックス(接頭辞)をつけておいた方が無難です。

-webkit-animation-name: shake;
-moz-animation-name: shake;
animation-name: shake;

クリック時にアニメーションさせる

アニメーションするだけならCSSだけでできますが、クリック時にアニメーションを実行するにはjQueryなどのスクリプトを使う必要があります。次はその方法を解説します。

まず先ほどと同じくボタン要素を用意します。

<button id="btn" class="shake_btn" >ボタン</button>

そして次のようにCSSを定義します。

.shake_btn
{   
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 6px;
  width: 150px;
  font-weight: bold;
}

@keyframes shake
{
  from{
    transform: translateX(-5px) translateY(0px);
  }
  
  20%{
    transform: translateX(5px) translateY(0px);
  }
  
  40%{
    transform: translateX(-10px) translateY(-3px);
  }
  
  60%{
    transform: translateX(10px) translateY(0px);
  }
  
   80%{
    transform: translateX(-10px) translateY(0px);
  }
  
  to{
    transform: translateX(-5px) translateY(0px);
  }
}

このCSS内ではボタン要素に対してアニメーションは適用していません。

代わりに次のようにスクリプト内でボタンがクリックされるたびにcss関数を使ってアニメーションプロパティを設定します。

$(function(){
  $("#btn").on("click", function(){
    /** アニメーションプロパティを設定 */
    $(this).css("animation", "shake 0.3s");
    
    /** ボタン要素をコピーして古いものと置き換え */
    var copied = $(this).clone(true);
    $(this).before(copied);
    $("." + $(this).attr("class") + ":last").remove();
  });
});

細かい説明はしませんがanimationプロパティの設定は一度アニメーションが実行された後の要素には無効なので、clone関数でボタンのコピーを作りクリックでアニメーションするたびに新しいボタン要素に置き換えています。

このように作った要素はブラウザ上では次のような動作をします。ボタンをクリックすると上下左右にガタガタ震えます。

See the Pen NYqYQP by kaz1503 (@kaz1503) on CodePen.dark

以上ガタガタするアニメーションをボタンにつける方法について解説しました。