Pacman

Source

<style>
#t {
    width: 500px;
    height: 300px;
    background: #000;
    position: relative;
}

#sep {
    border: 2px dashed #fff;
    margin: 0 auto;
    height: 100%;
    width: 1px;
}

#ball {
    animation: moveBall 5s linear infinite;
    -moz-animation: moveBall 5s linear infinite;
    -webkit-animation: moveBall 5s linear infinite;
    -o-animation: moveBall 5s linear infinite;
    margin: 0 auto;
    background: #fff;
    position: absolute;
    top: 140px;
    left: 30px;
    width: 20px;
    height: 20px;
}

#left {
    animation: moveLeft 5s linear infinite;
    -moz-animation: moveLeft 5s linear infinite;
    -webkit-animation: moveLeft 5s linear infinite;
    -o-animation: moveLeft 5s linear infinite;
    background: #fff;
    position: absolute;
    top: 100px;
    left: 10px;
    width: 20px;
    height: 100px;
}

#right {
    animation: moveRight 5s linear infinite;
    -moz-animation: moveRight 5s linear infinite;
    -webkit-animation: moveRight 5s linear infinite;
    -o-animation: moveRight 5s linear infinite;
    background: #FFF;
    position: absolute;
    top: 100px;
    right: 10px;
    width: 20px;
    height: 100px;
}

#scoreLeft {
    position: absolute;
    top: 10px;
    right: 180px;
    width: 30px;
    height: 50px;
    border: 3px solid #fff;
}

#scoreRight {
    position: absolute;
    top: 10px;
    left: 180px;
    width: 30px;
    height: 50px;
    border: 3px solid #fff;
}

@keyframes moveBall {
    25%   {top:100px;left:470px;}
    50%   {top:250px;left:30px;}
    75%   {top:50px;left:470px;}
    100%   {top:140px;left:30px;}
}

@keyframes moveLeft {
    25% {top:100px;}
    50% {top:180px;}
    75% {top:180px;}
}

@keyframes moveRight {
    25% {top:40px;}
    50% {top:40px;}
    75% {top:20px;}
    100% {top:100px;}
}

/*moz*/
@-moz-keyframes moveBall {
    25%   {top:100px;left:470px;}
    50%   {top:250px;left:30px;}
    75%   {top:50px;left:470px;}
    100%   {top:140px;left:30px;}
}

@-moz-keyframes moveLeft {
    25% {top:100px;}
    50% {top:180px;}
    75% {top:180px;}
}

@-moz-keyframes moveRight {
    25% {top:40px;}
    50% {top:40px;}
    75% {top:20px;}
    100% {top:100px;}
}

/*webkit*/
@-webkit-keyframes moveBall {
    25%   {top:100px;left:470px;}
    50%   {top:250px;left:30px;}
    75%   {top:50px;left:470px;}
    100%   {top:140px;left:30px;}
}

@-webkit-keyframes moveLeft {
    25% {top:100px;}
    50% {top:180px;}
    75% {top:180px;}
}

@-webkit-keyframes moveRight {
    25% {top:40px;}
    50% {top:40px;}
    75% {top:20px;}
    100% {top:100px;}
}

/*o*/
@-o-keyframes moveBall {
    25%   {top:100px;left:470px;}
    50%   {top:250px;left:30px;}
    75%   {top:50px;left:470px;}
    100%   {top:140px;left:30px;}
}

@-o-keyframes moveLeft {
    25% {top:100px;}
    50% {top:180px;}
    75% {top:180px;}
}

@-o-keyframes moveRight {
    25% {top:40px;}
    50% {top:40px;}
    75% {top:20px;}
    100% {top:100px;}
}
</style>

<div id="t">
    <div id="sep"></div>
    <div id="left"></div>
    <div id="ball"></div>
    <div id="right"></div>
    <div id="scoreLeft"></div>
    <div id="scoreRight"></div>
</div>