Как запустить одну и ту же css анимацию?

Question

[pkring]

Как по клику запускать одну и ту же css анимацию? Т.е. анимация должна оборваться и запуститься сначала. Сейчас это работает так: есть два класса с одной и той же анимацией и они просто меняются по клику в зависимости от флага. Если просто удалять класс и сразу добавлять, то анимация просто продолжает выполняться без возврата в начало.
Ссылка наjsfiddle

Answer 1

[Stalker_RED]

Comments

[pkring]

То что надо

Answer 2

[xtress]

А такой вариант не подойдёт:

function animateActive() {
     video.classList.toggle('animate');
 }

Вроде бы работает так, как вам нужно

Comments

[pkring]

Нет она не обрывается, а идет до конца и уже только потом ее можно снова запустить