Анимация Coin Flip с использованием addClass не работает правильно

Question

Вот живой сайт:

http://thomaspalumbo.com/projects/coinflip/

ЦЕЛЬ: каждый раз, когда вы нажимаете на монету, имейте анимацию сальто.

А вот и мой JavaScript:

function coinToss() {
        var number = Math.floor(Math.random() * 2);


                $("#coin").toggleClass('flipAgain');


        if(number == 0) {
            $("#coin").removeClass('heads');
            $("#coin").removeClass('tails');

            var value = $("#headsText").val(); 
            document.getElementById("result").innerHTML="Heads";
            $('#resultText').html($("#headsText").val());
            $("#coin").addClass('heads');

        }
        else if(number == 1) {
            $("#coin").removeClass('heads');
            $("#coin").removeClass('tails');

            var value = $("#tailsText").val(); 
            document.getElementById("result").innerHTML="Tails";
            $('#resultText').html($("#tailsText").val());
            $("#coin").addClass('tails');
    }
}

Этот код работает только через раз. Я попытался использовать два разных класса, flip и flipAgain, которые имеют одинаковую точную анимацию CSS. И я правильно переключился с помощью оператора if else, но анимации не было. Вот этот JavaScript:

if($("#coin").hasClass("flip")){
                $("#coin").removeClass('flip');
                $("#coin").toggleClass('flipAgain');
            }
            else if($("#coin").hasClass('flipAgain')){
                $("#coin").removeClass('flipAgain');

                $("#coin").toggleClass('flip');
            }
            else {
                $("#coin").toggleClass('flip');
            }