Nyan Cat (Not yet)

by XTREME104

HTML

<div id="nyanCat">
    <div id="body">
        <div id="color"/>
    </div>
    
    <div id="head">
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

#nyanCat {
    position: absolute;
    /* left: 50%; right: 50%; top: 50%; bottom: 50%; */
}

#body {
    position: relative;
    width: 200px;
    height: 115px;
    background: #ffcc99;
    border: 8px solid black;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#head {
    position: relative;
    bottom: 118px;
    right: -100px;
    width: 75px;
    height: 75px;
    background: #979797;
    border: 8px solid black;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-animation: headMovement 700ms infinite;
}

@-webkit-keyframes headMovement {
    0% {
        bottom: 118px;
        right: -95px;
    }
    25% {
        bottom: 118px;
        right: -105px;
    }
    50% {
        bottom: 128px;
        right: -105px;
    }
    75% {
        bottom: 128px;
        right: -95px;
    }
    100% {
        bottom: 118px;
        right: -95px;
    }
}

#color {
    width: 100%;
    height: 100%;
    background: #ff99ff;
    border-radius: 10px;
}

JavaScript

window.onload = init();

function init() {
    nyanCat = document.getElementById('nyanCat');
    check();
    setInterval(check, 0);
}

function check() {
    nyanCat.style.top = (window.innerHeight / 2) - (nyanCat.offsetHeight / 2) + "px";

    nyanCat.style.left = (window.innerWidth / 2) - (nyanCat.offsetWidth / 2) + "px";
}