Packman o Comecocos puro Css

El juego del Comecocos o Packman enpuro css.

by kseso

HTML

<div class="pista">
  <div class="luces"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  <div class="tras-come"></div>
  <div class="packman"><div class="comecocos"></div></div>
    <div class="fantasmas">
       <div class="fantasma tres"><div class="ojo"></div><div class="ojo"></div></div>
     <div class="fantasma uno"><div class="ojo"></div><div class="ojo"></div></div>
    <div class="fantasma dos"><div class="ojo"></div><div class="ojo"></div></div>
 </div>  
 </div>

CSS

.pista {
      background: #000;
      border: 5px solid blue;
      border-radius: 10px;
      height: 160px;
      margin: 25px 0;
      padding: 30px 0 0;
      box-shadow: 0 0 10px 5px rgba(48,160,255, .5);
      position: relative;
}
.pista:before, .pista:after {
    background: none repeat scroll 0 0 black;
    content: "";
    display: block;
    height: 145px;
    position: absolute;
    top: 20px;
    width: 20px;
}
.pista:before {left: -10px;}
.pista:after {right: -5px;}
.luces span {
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 100%;
      background: blue;
      box-shadow: 0 0 10px 5px rgba(48,160,255, .8);
      margin: 45px 4%;      
}
.packman {
     -moz-animation: comecocos 10s infinite linear;
     -webkit-animation: comecocos 10s infinite linear;
     -o-animation: comecocos 10s infinite linear;
     -ms-animation: comecocos 10s infinite linear;
     animation: comecocos 10s infinite linear;
     top: 0;
     left: 0;
     position: absolute;
     height: 100%;
     width: 100%;
}
.comecocos {
     position: absolute;
     top: 30px;
     left: -60px;
     width:1px;
     height:1px;
     border-right:60px solid transparent;
     border-top:60px solid yellow;
     border-left:60px solid yellow;
     border-bottom:60px solid yellow;
     border-radius: 60px;
     z-index: 3;

}
.comecocos:after {
    background: black;
    border-radius: 50%;
    content: "";
    height: 20px;
    left: -10px;
    position: absolute;
    top: -40px;
    width: 20px;
    z-index: 5;
}
.comecocos:before {
    border-color: yellow transparent yellow yellow;
    border-radius: 60px 60px 60px 60px;
    border-right: 60px solid transparent;
    border-style: solid;
    border-width: 60px;
    content: "";
    height: 1px;
    left: -60px;
    position: absolute;
    top: -60px;
    width: 1px;
    z-index: -1;
    -moz-animation: boca .95s infinite linear;
    -webkit-animation: boca .95s infinite linear;
    -o-animation:...