CSS3/jQuery Blinking Eyes

Yeah Boy!

HTML

<div class="catHolder">
    <span class="head">
        <span class="face">
            <span class="eye">
                <span class="lidT"></span>
                <span class="pup"></span>
                <span class="lidB"></span>
            </span>
            <span class="eye">
                <span class="lidT"></span>
                <span class="pup"></span>
                <span class="lidB"></span>
            </span>
            
            <span class="smile">
                <span class="hC"><span class="teethLine"></span><span class="tL"></span><span class="tL"></span>    <span class="tL"></span><span class="tL"></span><span class="tL"></span></span>
            </span>
        </span>
    </span>
</div>

<div class="controls clearfix">
    <div class="blink face-control">Click to blink</div><span class="clearfix"></span>
    <div class="look face-control">Click to Look</div>
    <div class="both face-control">Click for Both</div>
    <div class="scared face-control">Click to be Scared</div>
    <input type="radio" id="loop">
</div>

CSS

html {
    background: #2b2b2b;
}

body {
    margin: 0;
}

.catHolder {
    width: 300px;
    margin: 0 auto;
    position: relative;
    top: 10em;
}

.head {
    display: block;
    position: relative;
    background: #821067;
    border-radius: 100px 100px 0 0;
    height: 200px;
    width: 300px;
}

.head:after, .head:before {
    content: "";
    display: block;
    border-bottom: 130px solid #821067;
    position: absolute;
    top: -20px;
}

.head:before {
    left: 0;
    border-left: 0 solid transparent;
    border-right: 120px solid transparent;
}

.head:after {
    right: 0;
    border-right: 0 solid transparent;
    border-left: 120px solid transparent;
}

.face {
    width: 210px;
    margin: 0 auto;
    display: block;
}

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #fad73f; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #fad73f 0, #fad73f 49px, #821067 50px); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(49px,#fad73f), color-stop(50px,#821067)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 49px,#821067 50px); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 49px,#821067 50px); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 49px,#821067 50px); /* IE10+ */
    background: radial-gradient(ellipse at center,  #fad73f 0,#fad73f 49px,#821067 50px); /* W3C */

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: inline-block;

    z-index: 100;
}

.pup {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background: #2b2b2b;
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;
}

.lidT {
    display: block;
   ...

JavaScript

$('.blink').on('click', function() {
    $('.lidT').animate({top: '-40'}, 500).delay(200).animate({top: '-80'});
    $('.lidB').animate({bottom: '-40'}, 500).delay(200).animate({bottom: '-80'});
});

$('.look').on('click', function() {
    $('.pup').animate({'left': '80'}, 500).delay(200).animate({'left': '0'}, 700).delay(200).animate({left: 40});
});

$('.both').on('click', function() {
    $('.lidT').animate({top: '-40'}, 500).delay(200).animate({top: '-80'});
    $('.lidB').animate({bottom: '-40'}, 500).delay(200).animate({bottom: '-80'});
    $('.pup').delay(900).animate({'left': '80'}, 500).delay(200).animate({'left': '0'}, 700).delay(200).animate({left: 40});
});

$('.scared').on('click', function() {
    $('.lidT').animate({top: '-100'}, 800).delay(200).animate({top: '-40'}, 500).delay(200).animate({top: '-80'});
    $('.lidB').animate({bottom: '-100'}, 800).delay(200).animate({bottom: '-40'}, 500).delay(200).animate({bottom: '-80'});
    $('.pup').animate({'height': '50', 'width': '50', top: '25',left: '25'}, 500).delay(1000).animate({'height': '20', 'width': '20', top: '40',left: '40'});
    //$('.smile').addClass('rotate');
});