JavaScript blinking eye animation : <p>I am currently trying to learn JavaScript and trying out a lot of stuff, but as for now, my JS skilly are still very limited.
I created a little game where there is a box with bunny heads which randomly appear and the user has to click them as fast as possible.</p>

<p>So I created the bunnies with an interval animation where the bunny closes and opens its eyes within every 2 seconds.
Now I feel kind of stupid, but i can't manage to get the animation working as I want it to. Now the bunny is just closing its eyes every 2 seconds and then opening them again every 2 seconds. However, I want it only to blink, meaning that the eyes should be closed just for an instant and then opened again, so that the bunny is blinking every 2 seconds.
And then I would also like it to randomly sometimes blink only once and sometimes blink twice. 
Not sure if this is hella easy and I am just blind from hours of coding stuff and learning new things, but it seems that I might need your help here.</p>

<p><a href="https://jsfiddle.net/schakalwal/y390jcx8/">Here is a fiddle</a> of the whole thing as it is right now.</p>

<p>You can see the complete code that was used inside the fiddle. I did not want to post the whole website here in the code section, but the parts I believe are of interest for my animation.</p>

<p>Here is the js code for the blinking eyes:</p>

<pre><code>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);
</code></pre>

<p>Next the HTML</p>

<pre><code>&lt;div id="shape" class="game-shapes"&gt;
    &lt;div class="ears left"&gt;&lt;/div&gt;
    &lt;div class="ears right"&gt;&lt;/div&gt;
    &lt;div id="eyeleft" class="eyeleft"&gt;&lt;/div&gt;
    &lt;div id="eyeright" class="eyeright"&gt;&lt;/div&gt;
    &lt;div id="mouth"&gt;
        &lt;div id="tooth"&gt;&lt;/div&gt;
        &lt;div id="tongue"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And now CSS</p>

<pre><code>.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;
}
</code></pre>
