Мгновенная анимация глаз

В настоящее время я пытаюсь изучить JavaScript и попробовать много чего, но пока что мой JS skilly все еще очень ограничен. Я создал небольшую игру, в которой есть коробка с головами кролика, которые случайно появляются, и пользователь должен щелкнуть их как можно быстрее.

Итак, я создал кроликов с интервальной анимацией, где кролик закрывается и открывает глаза каждые 2 секунды. Теперь я чувствую себя глупо, но мне не удается заставить анимацию работать так, как я этого хочу. Теперь кролик просто закрывает глаза каждые 2 секунды, а затем открывает их каждые 2 секунды. Тем не менее, я хочу, чтобы он только моргал, а это означает, что глаза должны быть закрыты на мгновение, а затем снова открыты, чтобы кролик мигал каждые 2 секунды. И тогда мне также хотелось бы, чтобы он случайным образом моргал только один раз и иногда мерцал дважды. Не уверен, что это хелла легко, и я просто ослеплен от часов кодирования и изучения новых вещей, но мне кажется, что мне может понадобиться ваша помощь здесь.

Вот сценарий всего, что сейчас.

Вы можете увидеть полный код, который использовался внутри скрипта. Я не хотел размещать весь сайт здесь в разделе кода, но те части, которые, как мне кажется, представляют интерес для моей анимации.

Вот код js для мигающих глаз:

var eyeleft = document.getElementById("eyeleft");
var eyeright = document.getElementById("eyeright");

window.onload = setInterval(function() {
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
    }, 2000);

Далее HTML

<div id="shape" class="game-shapes">
    <div class="ears left"></div>
    <div class="ears right"></div>
    <div id="eyeleft" class="eyeleft"></div>
    <div id="eyeright" class="eyeright"></div>
    <div id="mouth">
        <div id="tooth"></div>
        <div id="tongue"></div>
    </div>
</div>

И теперь CSS

.game-shapes {
  height: 80px;
  width: 80px;
  cursor: pointer;
  opacity: 0;
  position: relative;
  transition: opacity ease-in-out .2s;
}
.game-shapes div {
  position: absolute;
}
.eyeleft,
.eyeright {
  background: #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  top: 30px;
}
.eyeleft {
  left: 4px;
}
.eyeright {
  right: 4px;
}
.eyeleft:before,
.eyeleft:after,
.eyeright:before,
.eyeright:after {
  content: '';
  background: #fff;
  width: 7px;
  height: 7px;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
}
.eyeleft:after,
.eyeright:after {
  width: 4px;
  height: 4px;
  top: 10px;
  left: 10px;
}
.closedeyeleft,
.closedeyeright {
  background: transparent none repeat scroll 0 0;
  border-color: #000;
  border-radius: 5px;
  border-style: solid;
  border-width: 4px 4px 0;
  height: 4px;
  top: 35px;
  width: 12px;
}
.closedeyeleft {
  left: 3px;
}
.closedeyeright {
  right: 3px;
}