Если заявление внутри события Click Javascript

Question

Я новичок в Jquery и работаю с сеткой элементов списка, которые оформлены в виде красных точек. Я сделал так, чтобы при наведении курсора на одну из точек ему давался класс с анимацией, которая увеличивает конкретную точку.

Класс

.twoHover{
transform-origin: center;
animation: makeDotsBig 1s forwards;
}
@keyframes makeDotsBig {
  0%{
    -webkit-transform: scale(1);
  }
  100%{
    -webkit-transform: scale(3);
  }
}

JS

var numDots = 0;
$("li").on('mouseover', function(event){
    event.preventDefault();
    $(this).addClass("twoHover");
    numDots++;
})

Моя проблема сейчас в том, что, как только все точки были расширены, я хочу запустить анимацию, которая заставляет их все анимироваться в одно и то же перекрытие на странице. Я проверил это с событием click, которое консоль записывает в журнал «numDots», и при наведении курсора на число успешно добавляется число, но неважно, какой тип if, while или для l oop, я пытаюсь, кажется, не могу сделать триггер анимации, как только «numDots» достигает моего желаемого числа (в данном случае 25).

Если кто-нибудь может привести меня в правильном направлении для решения, я буду признателен!