Animated Character using pure css

My Character. Please do not steal him from me!

by James Butler

HTML

<div class="character">
    <div class="hatwrapper">
        <div class="top"></div>
    </div>
    <div class="head">
        <div class="eye"></div>
        <div class="eye"></div>
    </div>
    <div class="bottom"></div>
</div>
<div class="vanished">Seems Like this page has magically disappeared</div>

CSS

html {
    background: #222;
    height:100%;
}
.character {
    transition: transform 2s;
    perspective: 300px;
    -webkit-animation: nod 1s alternate infinite;
    animation: nod 1s alternate infinite;
    -webkit-animation-delay:2s;
    animation-delay:2s;
}
.character div {
    display:inline-block;
}
.hatwrapper {
    position:absolute;
    left:210px;
    transform-origin:center center;
    transform:rotate(10deg);
    transition:all 0.6s;
    top:0;
}
.hatwrapper .top {
    height:20px;
    width:100px;
    background:black;
    border-radius:50%;
    position:absolute;
    top:0;
    left:0;
    box-shadow:inset 0 0 1px lightgray;
}
.top:before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    height:100px;
    width:100%;
    background:black;
    z-index:-1;
}
.top:after {
    content:"";
    position:absolute;
    top:84px;
    left:-20px;
    height:70%;
    width:100%;
    border-radius:50%;
    z-index:-2;
    border:20px solid black;
    box-shadow:inset 0 0 0 1px gray, inset 0 0 0 10px black;
}
.head {
    position:absolute;
    top:120px;
    left:190px;
    height:100px;
    width:100px;
    background:chocolate;
    z-index:-3;
    border-radius:0 0 40% 40%;
    border-bottom:10px solid white;
    transition:all 1.2s;
}
.bottom {
    position:absolute;
    top:120px;
    left:190px;
    height:120px;
    width:100px;
    background:chocolate;
    z-index:-4;
    border-radius:0 0 40% 40%;
}
.eye {
    position:absolute;
    height:30px;
    width:15px;
    /*background:white;*/
    top:50%;
    left:20%;
    border-radius: 5px;
    border-top:1px solid black;
    transition:all 0.5s;
    overflow:hidden;
}
.eye:nth-child(2) {
    left:60%;
}
.eye:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:white;
    transition:all 0.5s;
}
.eye:after {
    content:"";
    position:absolute;
    bottom:0;
    left:30%;
    height:20%;
    width:20%;
   ...

JavaScript

$(document).ready(function () {
    setTimeout(

    function () {
        $('.vanished').addClass("vanishedShown");
        $('html').addClass("html1");
    }, 2000);
});