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

前提・実現したいこと

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

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

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

該当のソースコード

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

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

css
.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」のクリックの一括指定では動作しないのかわかりません。

html
<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>

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

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

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