Pure CSS Nyan Cat

#jolo

HTML

<!-- 
Pure CSS Nyancat by @ffrandias 
Forked from here: http://jsfiddle.net/ffrandias/JYnTC/ 
-->
<div class="NyanCat NyanSize"></div>

CSS

/***********************
Pure CSS Nyancat by @ffrandias

obviously could do it with less lines of css 
but I REALLY wanted to only have ONE div.

************************/

body {
    background:#1c4170;
}

/* use this to adjust the size of your Nyancat (Whole values only) */
.NyanSize {
    font-size: 8px;
}


/* animations */
@-webkit-keyframes catMove {
    0%   { -webkit-transform:translate(0,0);     }
    25%  { -webkit-transform:translate(5em,0);   }
    50%  {  -webkit-transform:translate(5em,5em) }
    75%  { -webkit-transform:translate(0,5em);   }
    100% { -webkit-transform:translate(0,0);     }     
}

/* grrr maybe someday you'll be able to animate 
pseudo elements independent of the parent. 

Oh well, I guess I can still just animate the 
parent element via box shadow...if you could 
parent & animate it would make it worth it */
@-webkit-keyframes headMove {
    0%   { top:7em; left:20em;   }
    25%  { top:6em; left:20em;   }
    50%  { top:6em; left:21em;   }
    75%  { top:7em; left:21em;   }
    100% { top:7em; left:20em;   }  
}



.NyanCat, .NyanCat:before, .NyanCat:after {
    height:1em;width:1em; /* ratio of each "pixel" */
   
 /* fixes edges for solid color, makes the 
    corners a little wonky Grrrr  I checked
    using a SCSS conditional but it does not complile 
    the animations correctly. So bugs remain Sadface.*/

    padding:1px;   
    transform : translateZ(0); /* hack forces hardware acceleration which is kind of needed*/
    
    /* Any individual "pixel" effects are applied here */    
    /*
    border-radius:1em; 
    /* so it's easier to just close the comment above...#lazyDeveloper */
}

.NyanCat:before, .NyanCat:after {
    content:"";
    position:absolute;    
}

/*the Poptart */
.NyanCat {
    /* NyanCat positioning */
    position:absolute;
    top:50px; left:50px;
    
    -webkit-animation-timing-function:step-start;
   -webkit-animation:catMove 500ms infinite;
      
    /* the poptart */
    box-shadow:
       ...

JavaScript

//Meh, not listening to the grief you might give me over not css. 

function songOfTheNyanPeople () {
    var audio = document.getElementsByTagName("audio")[0];
    audio.play();
    audio.loop = true;
}

songOfTheNyanPeople();