CSS Creatures

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<ul class="creatures" id="creatures"><li><div class="click-anim"><figure class="" style="background-color:red"><div class="eye"></div><div class="eye"></div><div class="moustache"></div><div class="mouth "></div></figure></div><div class="shadow"></div><figcaption><em>by</em> <a href="http://twitter.com/#!/forrestfixx" rel="external">Forrest Fixx</a><time><a href="http://twitter.com/#!/forrestfixx/status/307861666681462784" rel="external">an hour ago</a></time></figcaption></li>

<li><div class="click-anim"><figure class="nervous" style="background-color:#ff6600"><div class="eye"></div><div class="eye"></div><div class="mouth teeth"></div></figure></div><div class="shadow"></div><figcaption><em>by</em> <a href="http://twitter.com/#!/pkollitsch" rel="external">Patrick on Samui</a><time><a href="http://twitter.com/#!/pkollitsch/status/307760933843906560" rel="external">8 hours ago</a></time></figcaption></li>

<li><div class="click-anim"><figure class="hyper" style="background-color:green"><div class="eye"></div><div class="eye"></div><div class="mouth tooth"></div></figure></div><div class="shadow"></div><figcaption><em>by</em> <a href="http://twitter.com/#!/teamratio" rel="external">Ratio Interactive</a><time><a href="http://twitter.com/#!/teamratio/status/307631204709064704" rel="external">16 hours ago</a></time></figcaption></li><li><div class="click-anim"><figure class="hyper" style="background-color:#6495ed"><div class="eye"></div><div class="eye"></div><div class="mouth tooth"></div></figure></div><div class="shadow"></div><figcaption><em>by</em> <a href="http://twitter.com/#!/matmasy" rel="external">Mathieu MASY</a><time><a href="http://twitter.com/#!/matmasy/status/307605431973457921" rel="external">18 hours ago</a></time></figcaption></li><li><div class="click-anim"><figure class="" style="background-color:purple"><div class="eye"></div><div class="mouth...

CSS

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  src: local('Amatic SC Bold'), local('AmaticSC-Bold'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/IDnkRTPGcrSVo50UyYNK73hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/* Reset ======================================================= */    
    
     * { margin:0; padding:0; box-sizing:border-box; }
    header, footer, section, figure, figcaption { display:block; }
        
    body {
        font:300 100%/1.5 'Amatic SC', cursive;
        color:#494636;
        background:#F8EEB9;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    
    section { width:290px; margin:0 auto; }
    
    a { cursor:pointer; text-decoration:none; }
    
    .paused * { animation-play-state:paused; opacity:.5; pointer-events:none; transition:opacity .4s; }
    
    
    
/* Creature container ========================================== */    
    .creatures { list-style:none; margin:15px 0; transition:opacity .3s; text-align:center; }
    
    .creatures li {
        display:inline-block;
        vertical-align:top;
        text-align:center;
        width:260px;
        list-style:none;
        margin:0 auto;
        padding:15px 30px;
        user-select:none;
    }
    .error { padding:45px; font-size:2.5rem; font-weight:bold; }



/* Header ====================================================== */
    hgroup { text-align:center; white-space:nowrap; }  
    .logo, .make { position:relative; display:block; color:#494636; }
    .logo { font-size:4rem; }
    
    .make { font-size:2rem; }
    
    header {
        display:none;
        color:#F8EEB9;
        font-weight:700;
        width:100%;
   ...

JavaScript

// Note: A real jQuery novice wrote this... 

function creatureLoad(){
        
    $.ajaxSetup({ cache: true });
            
    var ajax_url = "http://search.twitter.com/search.json?callback=?&rpp=16&q=-from%3Aallaboutpenguin+to%3Acsscreatures";
        
        // Big shout out to spammer @allaboutpenguin. Nice work!
    
    $.getJSON(ajax_url, function(data){
        $("#creatures").empty();
        $.each(data.results, function(i,tweet){
            if(tweet.text !== undefined){
                
                var set = [];
                
                var eyes = '<div class="eye"></div><div class="eye"></div>';
                var teeth = '';
                var moustache = '';
                var behavior = '';
                    
                var tweet_string = tweet.text;
                
                // Get rid of #csscreature hashtag
                var string = tweet_string.replace("@csscreature ", "").replace("@csscreatures ", "");
        
                // Parse string looking for keywords
                if (string.indexOf("teeth") >= 0) { set.push("teeth"); var teeth = "teeth"; }
                if (string.indexOf("moustache") >= 0) { set.push("moustache"); var moustache = '<div class="moustache"></div>'; }
                if (string.indexOf("tooth") >= 0) { set.push("tooth"); var teeth = "tooth"; }
                if (string.indexOf("cyclops") >= 0) { set.push("cyclops"); var eyes = '<div class="eye"></div>'; }

                if (string.indexOf("hungry") >= 0) { set.push("hungry"); var behavior = "hungry"; }
                if (string.indexOf("nervous") >= 0) { set.push("nervous"); var behavior = "nervous"; }
                    if (string.indexOf("sad") >= 0) { set.push("sad"); var behavior = "nervous"; }
                if (string.indexOf("hyper") >= 0) { set.push("hyper"); var behavior = "hyper"; }
                    if (string.indexOf("happy") >= 0) { set.push("happy"); var behavior = "hyper"; }
                    if...