Pacman!

CSS animated Pacman

HTML

<!-- You could do this with pseudo elements, but then it wouldn't animate in anything but FF4+ or IE10+ -->¨
<span class="pacman"><span class="pacman-mouth"></span></span>

CSS

html {
    background:#000;
}
.pacman {
    display:block;
 	width:0;
    height:0;
    margin:0 auto;
    
    border:100px solid yellow;
    border-radius:100px;
}
.pacman-mouth {
    display:block;
 	width:0;
    height:0;
    margin:-100px auto 0;
    
    border-bottom:100px solid transparent;
    border-top:100px solid transparent;
    border-right:100px solid #000;
    
    -webkit-animation-duration:10750ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:loaderpacman;
    -moz-animation-duration:750ms;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:loaderpacman;
    animation-duration:50ms;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-name:loaderpacman;
}
@-moz-keyframes loaderpacman {
	0% { 
		border-bottom-width:100px;
		border-top-width:100px;
		margin-top:-100px;
	}
	50% { 
		border-bottom-width:1px;
		border-top-width:1px;
		margin-top:0px;
	}
	100% { 
		border-bottom-width:100px;
		border-top-width:100px;
		margin-top:-100px;
	}
}
@-webkit-keyframes loaderpacman {
	0% { 
		border-bottom-width:100px;
		border-top-width:100px;
		margin-top:-100px;
	}
	50% { 
		border-bottom-width:1px;
		border-top-width:1px;
		margin-top:0px;
	}
	100% { 
		border-bottom-width:100px;
		border-top-width:100px;
		margin-top:-100px;
	}
}
@keyframes loaderpacman {
	0% { 
		border-bottom-width:100px;
		border-top-width:100px;
		margin-top:-100px;
	}
	50% { 
		border-bottom-width:1px;
		border-top-width:1px;
		margin-top:0px;
	}
	100% { 
		border-bottom-width:100px;
		border-top-width:100px;
		margin-top:-100px;
	}
}