あるボタンを押した時に、
ぽよんと反応するようなアニメーション効果を与えたい時があります。
その要素を押したら、例えば .click-animationのような、ぽよんとする CSS アニメーションを付けたクラスを、付与させる事が多いのですが、そんな時の実装 MEMO を残しておこうと思います。

従来の方法

要素を押した時に、.click-animationが既に付与されていたら、
削除してから付与しないとアニメーションしなく、
また削除して即付与してもアニメーションしないので、
setTimeout()などで適当な一定時間待って付与する事が多かったです。

$(target).removeClass('click-animation')
setTimeout(function () {
  $(target).addClass('click-animation')
}, 10)

もしくは、webkitAnimationEndなどを使って、アニメーション後にクラス削除などしていました。

$(target).addClass('click-animation')
$(target).on('webkitAnimationEnd', function () {
  $(target).removeClass('click-animation')
})

ただこれだと連打した場合に反応してくれない場合があります。

実装方法

requestAnimationFrameを使うと良さそうです。

$(target).removeClass('click-animation')
requestAnimationFrame(function () {
  $(target).addClass('click-animation')
})

これだと高橋名人ばりに連打した場合も確実にアニメーション効果を与える事ができました。
ブラウザの次のレンダリングフレームを待ってクラス付与してるから確実ということでしょうか。

Google I/O 2016 の実装サンプルでも、requestAnimationFrameを使った要素の付与や削除をやってるようでした。