Creating a CSS blinking eyelid effect

Question

I am trying to create a wait/countdown screen that shows an eye along with the eyelid, and eyeball with an iris effect. Given that so many of us spend time pointlessly star

Answer 1

SVG solution

Version without counter

• Animation of the eyelid of the eye is achieved by changing the attribute "d" by moving from the top to the bottom.
• For realistic image of the eyelid (giving volume) radial gradients are used.
• Pause animation in the upper and lower position of the eyelid is achieved by repeating the positions attribute d

Variant with add countdown

var checks = 100,
    checker = setInterval(Count, 2100);

  function Count() {
    document.getElementById('txt1').textContent = --checks;
    if (0 === checks) clearInterval(checker);
  }

.container {
 background:silver;
 
}
svg {
display:block;
width:15%;
height:23%;
padding-left:0.5em;
padding-bottom:1.5em;
margin:1em;
border-radius:50%;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
background:#8C6282;
}
#txt1 {
  font-size: 40px;
  font-weight:bold;
  fill:#FFDD00;
  stroke:#917E00;
  text-anchor:middle;
}