Pseudo-Pacman!

CSS animated Pacman

by laustdeleuran

HTML

<!-- Doing this with pseudo elements, but it won't animate in anything but FF4+ or IE10+ -->

CSS

html {
    background:#000;
    margin-top:19px;
}
body {
    display:block;
 	width:0;
    height:0;
    margin:0 auto;
    
    border:100px solid yellow;
    border-radius:100px;
}
body:after {
    content:".";
    text-indent:100%;
    overflow:hidden;
    
    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:750ms;
    -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:750ms;
    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;
	}
}