Pure CSS 😴!!!

index.html

<h1>Hover on me for animation!</h1>
<div class="head">
   <div class="left-eye"></div>
   <div class="right-eye"></div>
   <div class="mouth"></div>
   <div class="z-1 z">Z</div>
   <div class="z-2 z">Z</div>
   <div class="z-3 z">Z</div>
</div>

pure-css.markdown

Pure CSS 😴!!!

License.

style.css

:root {
  --dark-brown: rgba(100, 48, 10, 1);
  --dark-brown-fade: rgba(100, 48, 10, 0.5);
}
body{
   
}
h1{
   width:100%;
   text-align:center;
   font-weight:700;
   font-size:3em;
   font-family:arial;
   color:white;
   background:navy;
   box-shadow:0 5px 10px 2px black;
   border:2px solid white;
   position:relative;
   z-index:-1;
}
.head{
   position:relative;
   width:250px;
   height:250px;
   background:radial-gradient(circle at 50% 30%, white, orange 50%, var(--dark-brown)95%);
   border-radius:50%;
   box-shadow:inset 0 0 20px 10px var(--dark-brown), 0 0 0 4px var(--dark-brown), 0 5px 10px 5px black;
   margin: 100px auto;
}
.head::before{
   content:"";
   position:absolute;
   z-index:2;
   width:100%;
   height:100%;
   background:radial-gradient(circle at 50% 0, white 10%, orange 50%, transparent 80%);
   border-radius:50%;
   top:1%;
   filter:blur(5px);
}
.left-eye{
   position:absolute;
   z-index:3;
   width:50px;
   height:40px;
   background:radial-gradient(circle at 50% 0, transparent 55%, var(--dark-brown)55%, var(--dark-brown-fade)60%, var(--dark-brown-fade) 75%,var(--dark-brown) 80%);
   border-radius:50%;
   top:85px;
   left:55px;
   filter:drop-shadow(0 0 1px var(--dark-brown));
}
.right-eye{
   position:absolute;
   z-index:3;
   width:50px;
   height:40px;
   background:radial-gradient(circle at 50% 0, transparent 55%, var(--dark-brown)55%, var(--dark-brown-fade)60%, var(--dark-brown-fade) 75%,var(--dark-brown) 80%);
   border-radius:50%;
   top:85px;
   right:55px;
   filter:drop-shadow(0 0 1px var(--dark-brown));
}
.mouth{
   z-index:3;
   position:absolute;
   width:60px;
   height:65px;
   background:var(--dark-brown-fade);
   border-radius:50%;
   top:150px;
   left:95px;
   box-shadow:inset 0 0 10px 2px var(--dark-brown);
}
.z{
   position:absolute;
   z-index:3;
   font-size:3em;
   font-weight:900;
   font-family:arial;
   color:blue;
   -webkit-text-stroke:3px white;
   text-shadow:1px 4px 4px black;
   right:60px;
   top:0;
   opacity:0;  
}
.head:hover .mouth,
.head:hover .left-eye,
.head:hover .right-eye{
   animation:close 2s ease-in-out infinite;
}

.head:hover .z-1{
   animation:snore-1 2s linear infinite .25s;
}
.head:hover .z-2{
   animation:snore-2 2s linear infinite .5s;
}
.head:hover .z-3{
   animation:snore-3 2s linear infinite .75s;
}

@keyframes close{
   0%{
      transform:rotatex(75deg);
   }
   30%{
      transform:rotatex(0);
   }
}
@keyframes snore-1{
   0%{
      opacity:1;
      transform:scale(0)translate(0);
   }
   50%{
     opacity:1;
   }
   100%{
      opacity:0;
      transform:scale(1.5)translate(125px, -10px)perspective(200px)rotatey(85deg);
   }
}
@keyframes snore-2{
   0%{
      opacity:1;
      transform:scale(0)translate(0);
   }
   50%{
     opacity:1;
   }
   100%{
      opacity:0;
      transform:scale(1.5)translate(100px, -50px)perspective(200px)rotatey(85deg);
   }
}
@keyframes snore-3{
   0%{
      opacity:1;
      transform:scale(0)translate(0);
   }
   50%{
     opacity:1;
   }
   100%{
      opacity:0;
      transform:scale(1.5)translate(50px, 0)perspective(200px)rotatey(85deg);
   }
}