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