Como alternar a animação do ícone de recolhimento no Bootstrap 4?

Estou usando um ícone Font Awesome personalizado para a barra de navegação recolhida no Bootstrap 4 e estou tentando fazer com que ele gire com um clique. Consegui fazer isso no primeiro clique, mas depois disso, não importa quantas vezes eu clique, as animações não disparam.

Aqui está o HTML para a parte da barra de navegação:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <button id="toggler-btn" class="navbar-toggler btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span id="clpse-icon" class="fa fa-arrow-down"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-default btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

E estas são as animações CSS:

.fa-arrow-down-animated {
    animation-name: collapse-icon-animation;
    animation-duration: 0.15s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}

.fa-arrow-up-animated {
    animation-name: collapse-icon-animation-reverse;
    animation-duration: 0.25s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}

@keyframes collapse-icon-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

@keyframes collapse-icon-animation-reverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

E, finalmente, este é o código jQuery que estou usando:

$(document).ready(function () {

    $('#toggler-btn').on('click', function(){
        if($('#toggler-btn').attr('aria-expanded')){
            $('#clpse-icon').removeClass("fa-arrow-up-animated").addClass("fa-arrow-down-animated");
        }

        else{
            $('#clpse-icon').removeClass("fa-arrow-down-animated").addClass("fa-arrow-up-animated");
        }
    });
});

Ainda sou um iniciante, então espero que você explique com o máximo de detalhes possível sobre por que isso não funciona. Quando eu inspeciono o ícone, posso ver que as classes não estão sendo adicionadas / removidas após o primeiro clique, embora o código jquery deva ser ativado a cada clique. E desculpe antecipadamente se esta é uma pergunta repetida, mas estou procurando por um problema semelhante por horas e não encontrei um.