CSS3/jQuery Blinking Eyes

Yeah Boy!

by Venkatesh Dematti

HTML

<div class="catHolder"> <span class="head">
        <span class="face">
            <span class="socket">
            <span class="eye">
                <span class="lidT"></span>
 <span class="pup"></span>
 <span class="lidB"></span>
</span>
    </span> <span class="socket">
            <span class="eye">
                <span class="lidT"></span>
 <span class="pup"></span>
 <span class="lidB"></span>
</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;
}
.socket {
    border-radius: 50%;
    height: 102px;
    width: 102px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    top: -1px;
    left: -1px;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}
.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #FAD73F;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    top: 1px;
    left: 1px;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}
.pup {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background: #2b2b2b;
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;
}
.lidT {
    display: block;
    width: 101px;
    height: 101px;
    background: #821067;
    position: absolute;
    top: -80px;
    z-index: 20;
}
.lidB {
    display: block;
    width: 100px;
    height: 100px;
    background: #821067;
    position: absolute;
    bottom: -80px;
    z-index: 20;
}
.smile {
    width: 200px;
    height: 80px;
    overflow: hidden;
    position: relative;
    border-top: 2px...

JavaScript

$('.blink').on('click', function () {
    $('.lidT').animate({
        top: '-4'
    }, 500).delay(200).animate({
        top: '-8'
    });
    $('.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');
});