CSSアニメーションが１回目しか効きません

Question

前提・実現したいこと

CSSでぶるぶる震えるアニメーションを作っています。
「start」のクリックで、これを何度も発生するようにしたいです。

発生している問題・エラーメッセージ

アニメーションが１回目しか効きません

該当のソースコード

<div class="box"></div>
<button type="button" class="start">start</button>

$('.start').click(function(){
  $('.box').removeClass('shake'); 
  $('.box').addClass('shake');
});

.box {
  background: red;
  width: 50px;
  height: 50px;
}

.shake {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;	
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;		
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

試したこと

思いつきですが、クリックを分けて実行してみたらなぜか動作しました。
つまり以下「remove」と「add」に分けて、「remove」をクリックしてから、「add」をクリックすると動作するんです。
なぜこれで動作するのに、上記の「start」のクリックの一括指定では動作しないのかわかりません。

<div class="box"></div>
<button type="button" class="start">start</button>

<button type="button" class="remove">remove</button>
<button type="button" class="add">add</button>

$('.start').click(function(){
  $('.box').removeClass('shake'); 
  $('.box').addClass('shake');
});

$('.remove').click(function(){
  $('.box').removeClass('shake'); 
});

$('.add').click(function(){
  $('.box').addClass('shake');
});

「start」のクリックだけで、何度も動作させるにはどのようにすべきでしょうか？

Answer 1

setTimeout で間隔を空けるというの方法も有効ですが、
アニメーション終了時に発生するイベント(animationend)がありますので、
そこでクラスを外すという方法もあります。

HTMLElement: animationend イベント - Web API | MDN

$('.start').click(function(){
  $('.box').addClass('shake');
});
$('.box').on('animationend', function() {
    $('.box').removeClass('shake'); 
});

アニメーションが終了する前にstartを再度クリックしたときの動作が、setTimeout とは微妙に異なるので、お好みで選択すればいいでしょう。
終了前にクリックしたときに、
setTimeout だと最初からアニメーションが始まる、
animationend だとそのまま終了まで続行する。

Comments

[nikuatsu]

ありがとうございます。実現できました

Answer 2

$('.start').click(function(){
$('.box').removeClass('shake');
$('.box').addClass('shake');
});

removeClassしたあとにすぐaddClassとすると動かないようなので
addClassをsetTimeoutで間隔開けて実行してみてください

Comments

[ppppppp]

hatena19氏の正攻法の利用をおすすめします

[nikuatsu]

ありがとうございます。