Pure CSS3 animated Pac-man

(no images, no javascript — pure awesome)

Why? For shits and giggles. How? Use the source, Luke!

Step 1: make pacman

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

Step 2: animate

    @keyframes munch
     {
          0% {
               transform:rotate(90deg);
          }
          50% {
               transform:rotate(0deg);
          }
          100% {
               transform:rotate(90deg);
          }
     }
     @keyframes bite
     {
          0% {
               transform:rotate(45deg);
          }
          50% {
               transform:rotate(90deg);
          }
          100% {
               transform:rotate(45deg);
          }
     }

Step 3: profit