css анимация pacman без `svg`

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P); 
 
html{ 
  background-color:#000; 
  border-bottom:solid 5px blue; 
  border-top:solid 5px blue; 
  overflow-x:hidden; 
  padding-bottom:142px; 
} 
 
p{ 
  color:#FFF; 
  font: 50px 'Press Start 2P',  cursive; 
  margin:200px 139px; 
  position:absolute; 
  text-align:center; 
} 
 
.pacman{ 
  margin:40px 10px; 
} 
 
.pacman-top{ 
  background-color:yellow; 
  height:100px; 
  width:200px; 
  border-radius:100px 100px 0 0; 
  animation: spin1 0.5s infinite linear; 
} 
 
.pacman-bottom{ 
background-color:yellow; 
  height:100px; 
  width:200px; 
  border-radius:0 0 100px 100px; 
  animation: spin2 0.5s infinite linear; 
} 
 
.feed { 
margin-top: -185px; 
margin-left:15px; 
width: 45px; 
height: 45px; 
border-radius: 30%; 
-moz-animation: eat 1s linear 0s infinite; 
-webkit-animation: eat 1s linear 0s infinite; 
animation: eat 1s linear 0s infinite; 
}    
 
/* Animation*/ 
 
@keyframes spin1 { 
	0%  {transform: rotate(0deg);} 
	50%{transform: rotate(-35deg);} 
   
} 
@keyframes spin2 { 
	0%  {transform: rotate(0deg);} 
  50%{transform: rotate(35deg);}	 
} 
 
@-moz-keyframes spin1 { 
	0%  {transform: rotate(0deg);} 
	50%{transform: rotate(-35deg);} 
   
} 
@-moz-keyframes spin2 { 
	0%  {transform: rotate(0deg);} 
  50%{transform: rotate(35deg);}	 
} 
 
@-webkit-keyframes spin1 { 
	0%  {transform: rotate(0deg);} 
	50%{transform: rotate(-35deg);} 
   
} 
@-webkit-keyframes spin2 { 
	0%  {transform: rotate(0deg);} 
  50%{transform: rotate(35deg);}	 
} 
 
@keyframes eat { 
	0% { box-shadow:  
      100px 65px 0 0 white,  
      300px 65px 0 0 white,  
      500px 65px 0 0 white,  
      700px 65px 0 0 white, 
      900px 65px 0 0 white,  
      1100px 65px 0 0 white,  
      1300px 65px 0 0 white;} 
   
100% { box-shadow:  
      0px 65px 0 0 white,  
      100px 65px 0 0 white, 
      300px 65px 0 0 white,  
      500px 65px 0 0 white,  
      700px 65px 0 0 white,  
      900px 65px 0 0 white,  
      1100px 65px 0 0 white;} 
} 
} 
 
 
@-moz-keyframes eat { 
	0% { box-shadow:  
      100px 65px 0 0 white,  
      300px 65px 0 0 white,  
      500px 65px 0 0 white,  
      700px 65px 0 0 white, 
      900px 65px 0 0 white,  
      1100px 65px 0 0 white,  
      1300px 65px 0 0 white;} 
   
100% { box-shadow:  
      0px 65px 0 0 white,  
      100px 65px 0 0 white, 
      300px 65px 0 0 white,  
      500px 65px 0 0 white,  
      700px 65px 0 0 white,  
      900px 65px 0 0 white,  
      1100px 65px 0 0 white;} 
} 
} 
 
 
@-webkit-keyframes eat { 
	0% { box-shadow:  
    100px 65px 0 0 white,  
    300px 65px 0 0 white,  
    500px 65px 0 0 white,  
    700px 65px 0 0 white, 
    900px 65px 0 0 white,  
    1100px 65px 0 0 white,  
    1300px 65px 0 0 white; 
  } 
   
  100% { box-shadow:  
    0px 65px 0 0 white,  
    100px 65px 0 0 white, 
    300px 65px 0 0 white,  
    500px 65px 0 0 white,  
    700px 65px 0 0 white,  
    900px 65px 0 0 white,  
    1100px 65px 0 0 white; 
  } 
  } 
}

<div class="pacman"> 
  <div class="pacman-top"></div> 
  <div class="pacman-bottom"></div> 
  <div class="feed"></div> 
</div>

 body{ 
          background:#222; 
          color:#ddd; 
          font-family:Exo; 
          text-shadow:0 -1px 0 #000; 
     } 
     h1,h2{ 
          color:#ff0; 
          text-shadow:0 -3px 3px #000; 
          font-weight:normal; 
     } 
     .wrapper{ 
          max-width:600px; 
          padding:0 20px; 
          margin:0 auto; 
     } 
     .pacman-holder{ 
          position:relative; 
          width:200px; 
          margin:100px auto; 
     } 
     .pacman-container { 
          display:block; 
          width:100px; 
          height: 100px; 
          -webkit-transform:rotate(45deg); 
          -moz-transform:rotate(45deg); 
          -o-transform:rotate(45deg); 
          transform:rotate(45deg); 
          -moz-animation: bite 0.5s linear infinite;  
          -webkit-animation: bite 0.5s linear infinite;  
          animation: bite 0.5s linear infinite; 
     } 
     .pacman-body { 
          background-color: #ff0; 
          position: absolute; 
          width: 100px; 
          height: 100px; 
          -moz-border-radius: 50px; 
          -webkit-border-radius: 50px; 
          -o-border-radius: 50px; 
          border-radius: 50px; 
     } 
     .dot { 
          background-color: #fff; 
          position: absolute; 
          z-index:0; 
          top:40px; 
          left:200px; 
          width: 20px; 
          height: 20px; 
          -moz-border-radius: 50px; 
          -webkit-border-radius: 50px; 
          -o-border-radius: 50px; 
          border-radius: 50px; 
          -moz-animation: movedot 0.5s linear infinite; 
          -webkit-animation: movedot 0.5s linear infinite; 
          animation: movedot 0.5s linear infinite; 
          -moz-animation-delay:0.2s;  
          -webkit-animation-delay:0.2s;  
          animation-delay:0.2s; 
     } 
     .pacman { 
          position: absolute; 
          width: 100px; 
          height: 100px; 
          -moz-border-radius: 50px; 
          -webkit-border-radius: 50px; 
          -o-border-radius: 50px; 
          border-radius: 50px; 
          clip: rect(0px, 50px, 100px, 0px); 
          z-index:2; 
     } 
     .pacman-mouth { 
          position: absolute; 
          left:2px; 
          width: 102px; 
          height: 102px; 
          -moz-border-radius: 50px; 
          -webkit-border-radius: 50px; 
          -o-border-radius: 50px; 
          border-radius: 50px; 
          clip: rect(0px, 100px, 100px, 52px); 
     } 
 
     .pacman-mouth .pacman { 
          background-color: #222; 
          -webkit-transform:rotate(90deg); 
          -moz-transform:rotate(90deg); 
          -o-transform:rotate(90deg); 
          transform:rotate(90deg); 
          -moz-animation: munch 0.5s linear infinite;  
          -webkit-animation: munch 0.5s linear infinite;  
          animation: munch 0.5s linear infinite; 
	 
		  /* To fix a yellow border on pacman's mouth */ 
		  border: 3px solid #222; 
     } 
 
     .pacman-holder.moving{ 
          width:100px; 
          -moz-animation: move 2.7s linear infinite; 
          -webkit-animation: move 2.7s linear infinite; 
          animation: move 2.7s linear infinite; 
     } 
 
     .pacman-holder.moving .dot{ 
          -moz-animation: movedot 1s linear infinite;  
          -webkit-animation: movedot 1s linear infinite; 
          animation: movedot 1s linear infinite; 
          -moz-animation-delay:0.2s; 
          -webkit-animation-delay:0.2s; 
          animation-delay:0.2s; 
     } 
 
     @-moz-keyframes munch  
     { 
          0% { 
               -moz-transform:rotate(90deg); 
          } 
          50% { 
               -moz-transform:rotate(0deg); 
          } 
          100% { 
               -moz-transform:rotate(90deg); 
          } 
     } 
     @-webkit-keyframes munch  
     { 
          0% { 
               -webkit-transform:rotate(90deg); 
          } 
          50% { 
               -webkit-transform:rotate(0deg); 
          } 
          100% { 
               -webkit-transform:rotate(90deg); 
          } 
     } 
     @keyframes munch 
     { 
          0% { 
               transform:rotate(90deg); 
          } 
          50% { 
               transform:rotate(0deg); 
          } 
          100% { 
               transform:rotate(90deg); 
          } 
     } 
 
     @-moz-keyframes bite  
     { 
          0% { 
               -moz-transform:rotate(45deg); 
          } 
          50% { 
               -moz-transform:rotate(90deg); 
          } 
          100% { 
               -moz-transform:rotate(45deg); 
          } 
     } 
     @-webkit-keyframes bite  
     { 
          0% { 
               -webkit-transform:rotate(45deg); 
          } 
          50% { 
               -webkit-transform:rotate(90deg); 
          } 
          100% { 
               -webkit-transform:rotate(45deg); 
          } 
     } 
     @keyframes bite 
     { 
          0% { 
               transform:rotate(45deg); 
          } 
          50% { 
               transform:rotate(90deg); 
          } 
          100% { 
               transform:rotate(45deg); 
          } 
     } 
 
     @-webkit-keyframes movedot  
     { 
          0% { 
               left:200px; 
          } 
          100% { 
               left:50px; 
          } 
     }      
     @-moz-keyframes movedot  
     { 
          0% { 
               left:200px; 
          } 
          100% { 
               left:50px; 
          } 
     } 
     @keyframes movedot  
     { 
          0% { 
               left:200px; 
          } 
          100% { 
               left:50px; 
          } 
     } 
 
	@-webkit-keyframes move 
	{ 
		 0% { 
			  -webkit-transform: scaleX(1);          
			  left:0px; 
		 } 
	 
		 49.999% { 
			  left:200px; 
			  -webkit-transform: scaleX(1); 
		 } 
		 50%{ 
			-webkit-transform: scaleX(-1); 
	   } 
	 
	   100% { 
		 left:0px; 
		 -webkit-transform: scaleX(-1);      
		}         
	} 
	@-moz-keyframes move 
	{ 
		 0% { 
			  -moz-transform: scaleX(1);                
			  left:0px; 
		 } 
	 
		 49.999% { 
			  left:200px; 
			  -moz-transform: scaleX(1); 
		 } 
		 50%{ 
			-moz-transform: scaleX(-1); 
		 } 
	 
	   100% { 
		 left:0px; 
		 -moz-transform: scaleX(-1);           
		}    
	} 
	@keyframes move 
		 { 
			  0% { 
				   transform: scaleX(1);            
				   left:0px; 
			  } 
	 
			  49.999% { 
				   left:200px; 
				   transform: scaleX(1); 
			  } 
			  50%{ 
				transform: scaleX(-1); 
		   } 
	 
		   100% { 
			  left:0px; 
			  transform: scaleX(-1);      
		 }           
	}

<div class="pacman-holder moving"> 
	<div class="pacman-container"> 
		<div class="pacman-body"></div> 
		<div class="pacman-mouth"><div class="pacman"></div></div> 
	</div> 
	 
	<div class="dot"></div> 
</div>