CSS анимация внезапно заканчивается

Question

Я создал анимацию вращения. При нажатии на спиннер, JS добавляет класс «загрузка» и начинает вращаться. Но если я удаляю этот класс , он возвращается на предыдущую позицию без анимации.

Я пытался использовать это: animation-fill-mode: forwards;, но результат был тот же.

Там мой CSS:

.loading {
    animation: spin 1s linear infinite 0s forwards;
}


@keyframes spin{
    from{
        transform: rotate(0deg)
    }
    to{
        transform: rotate(360deg)
    }
}

И HTML:

<i class="material-icons refresh-icon" onclick="$(this).toggleClass('loading');">refresh</i>

Answer 1

Спасибо за ваши предложения. Я сделал это, используя JS и animationiteration событие.

HTML:

<div class="spinner">
    <i class="material-icons refresh-icon" onclick="spinner(this)">refresh</i>
</div>

JS:

const spinner = el => {
    if($(el).hasClass('lock')) return;

    if($(el).hasClass('loading')){
        $(el).addClass('lock').one('animationiteration webkitAnimationIteration', function() {
            $(el).removeClass('loading').removeClass('lock');
        });
    }else{
        $(el).addClass('loading');
    }
}

Ссылка в кодовую панель: https://codepen.io/nenazarko/pen/zYGPoZy