Pacman CSS3 and jQuery Animation

Here's a simple tutorial on how to create a CSS/jQuery animated Pacman.

First of all, let's create the main shape:

.pacmanClose, .pacmanOpen {
 width: 0.1em;
 height: 0.1em;
 border-right: 60px solid transparent;
 border-top: 60px solid yellow;
 border-left: 60px solid yellow;
 border-bottom: 60px solid yellow;
 border-top-left-radius: 60px;
 border-top-right-radius: 60px;
 border-bottom-left-radius: 60px;
 border-bottom-right-radius: 60px;
 -webkit-transform: scale(1.001);
 -moz-transform: scale(1.001);
 -o-transform: scale(1.001);
 -ms-transform: scale(1.001);
 position: relative;
}
.pacmanOpen:after {
 content: ".";
 display: inline-block;
 color: black;
 font: bold 80px Times;
 position: absolute;
 top: -70px;
 left: 40px;
}

This will create the default (open mouth) shape of the pacman with the "dot":

Note: I use the transform: scale in order to make it sharp and remove the border color.

The closed shape

This shape will use the CSS pseudo-code :after and :before to simulate the close mouth.

.pacmanClose:before {
 -moz-transform: rotate(-12deg);
 -webkit-transform: rotate(-12deg);
 -ms-transform: rotate(-12deg);
 -o-transform: rotate(-12deg);
 transform: rotate(-12deg);
 background: yellow;
 border-top-right-radius: 56px;
 border-bottom-right-radius: 0px;
 content:"";
 top: -64px;
 height: 59px;
 left: -17px;
 position: absolute;
 width: 67px;
}
.pacmanClose:after {
 -moz-transform: rotate(12deg);
 -webkit-transform: rotate(11deg);
 -ms-transform: rotate(11deg);
 -o-transform: rotate(11deg);
 transform: rotate(11deg);
 background: yellow;
 border-bottom-right-radius: 56px;
 border-top-right-radius: 0px;
 content:"";
 height: 59px;
 left: -17px;
 position: absolute;
 top: 6px;
 width: 67px;
}

This will create the closed shape of the pacman:

The jQuery part (that creates the animation - 10 iterations for examples):

var iteration = 10;
function togglePacman() {
  var c = $('#pacman').hasClass('pacmanOpen');
  if(c) {
    $('#pacman').removeClass('pacmanOpen').addClass('pacmanClose');
  }
  else {
    $('#pacman').removeClass('pacmanClose').addClass('pacmanOpen');
  }
  iteration--;
  if(iteration) {
    setTimeout(togglePacman, 250);
  }
  else {
    iteration = 10;
  }
}
$('#buttonPacman').click(togglePacman);

The HTML:

<div class="pacmanOpen" id="Pacman"></div>
<input type="button" id="button" value="Start Animation" />