Мне кажется гораздо проще пользоваться
соответствующими ивентами для анимации. В этом случае вы ничего не считаете, никакие матрицы не преобразовываете, используете вашу анимацию как и обычно, только дописываете к ней небольшой кусочек кода, который решает когда нужно её остановить.
По первому клику вешаете класс с анимацией, а по повторному клику устанавливаете количество итераций анимации равное номеру текущей. Тут есть несколько вариантов: можно сделать
счетчик итераций, а можно опираться на
AnimationEvent.elapsedTime. Когда анимация заканчивается (
animationend) выполняете нужные функции.
Применительно к вашему коду это будет выглядеть как-то так: после срабатывания события onClick происходит запрос на сервер и установка класса для элемента, после того как получен ответ от сервера - просите элемент закончить анимацию, в конце анимации обрабатываете ответ.
Если вы используете реакт, то можно анимируемый элемент оформить в виде компонента, в который вы при просьбе об остановке будете передавать колбэк.