JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div class="pacman" id="pacman" style=display:none>
  <div class="eye">
    <div class="blink"></div>
    <div class="blink"></div>
  </div>
  <div class="mouth1"></div>
</div>

CSS

body {
   background-color: #fff;
 }
 
 .pacman {
   margin: 20% 0 0 20%;
   background-color: yellow;
   border-radius: 120px;
   width: 120px;
   height: 120px;
   display: inline-block;
   overflow: hidden;
   transition: width 2s, height 2s, ease-out 2s;
 }
 
 .pacman:hover {
   transform: rotate(360deg);
 }
 
 .pacman .eye {
   margin-top: 14%;
 }
 
 .pacman .eye div {
   border-radius: 10px;
   width: 10px;
   height: 10px;
   display: inline-block;
   background-color: red;
   border: 1px solid #000;
   margin-left: 32%;
  
 }
 .blink{animation: blink 1s infinite;}
 @keyframes blink {
   0% {
     background-color: red
   }
   50% {
     background-color: black
   }
 }
 
 .pacman .eye div:last-child {
   margin-left: 10%;
 }
 
 .pacman .mouth1 {
   display: inline-block;
   width: 0;
   height: 0;
   margin: -20px 0px 0 44%;
   vertical-align: middle;
   border-top: 50px solid transparent;
   border-right: 100px solid #fff;
   border-bottom: 50px solid transparent;
   transition: width 2s, height 2s, transform 2s;
 }
 
 .pacman .mouth1:hover,
 .pacman:hover .mouth1 {
   display: inline-block;
   width: 0;
   height: 0;
   margin: -20px 0px 0 44%;
   vertical-align: middle;
   border-top: 50px solid transparent;
   border-right: 100px solid #fff;
 }

JavaScript

var a = document.getElementById("pacman");
a.style.display = "inline-block";