<div class="monster">
    <div class="horns"></div>
  <div class="head">
    <div class="eye"></div>
    <div class="teeth"></div>
  </div>
  <div class="body">
    <div class="drool"></div>
    <div class="bellyBotton"></div>
    <div class="underpants"></div>
  </div>
  <div class="legs"><div class="feet"></div></div>
  <div class="shadow"></div>
</div>
$background: #000;
$monsterred: #c42b2e;
$monsterblue: #22a1cc;
$monsterDarkRed: #581b16;

*,
*:before,
*:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


html,
body
{
    overflow: visible;

    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    background: $background;
}


.monster
{
    position: relative;
    top: 100px;


    width: 100px;
    height: 187px;
    margin: 0 auto;

           animation-name:moveMonster;
            animation-duration:3s;
            animation-timing-function:ease;
            animation-delay:1s;
            animation-iteration-count:infinite;
            
            -webkit-animation-name:moveMonster;
            -webkit-animation-duration:3s;
            -webkit-animation-timing-function:ease;
            -webkit-animation-delay:1s;
            -webkit-animation-iteration-count:infinite;


    .horns
    {
        position: absolute;
        z-index: 1;
        top: -28px;
        left: 0;

        width: 88px;
        height: 77px;

        border-radius: 45%;
        background-color: transparent;
        box-shadow: 0 -18px 0 $monsterblue inset;
    }
    .head
    {
        position: relative;
        z-index: 2;
        top: 7px;
        left: 11px;

        width: 65px;
        height: 59px;

        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        background-color: $monsterred;
        &:after
        {
            position: absolute;
            top: 4px;
            left: 29px;

            display: block;

            width: 4px;
            height: 4px;

            content: '';

            border-radius: 50%;
            background-color: $monsterDarkRed;
        }
        &:before
        {
            position: absolute;
            top: 9px;
            left: 23px;

            display: block;

            width: 6px;
            height: 6px;

            content: '';

            border-radius: 50%;
            background-color: $monsterDarkRed;
            box-shadow: 10px 2px 0  $monsterDarkRed;
        }
    }
    .eye
    {
        position: absolute;
        z-index: 2;
        top: 21px;
        left: 21px;

        width: 24px;
        height: 24px;

        border-radius: 50%;
        background-color: #fff;
        &:before
        {
            position: absolute;
            z-index: 3;
            top: 8px;
            left: 8px;

            display: block;

            width: 8px;
            height: 8px;

            content: '';

            border-radius: 50%;
            background-color: $monsterDarkRed;
           /* -webkit-transition: all 1s ease 0s;
            -moz-transition: all 1s ease 0s;
            transition: all 1s ease 0s;*/
            
            animation-name:moveEye;
            animation-duration:3s;
            animation-timing-function:ease-in-out;
            animation-delay:1.2s;
            animation-iteration-count:infinite;
            
            -webkit-animation-name:moveEye;
            -webkit-animation-duration:3s;
            -webkit-animation-timing-function:ease-in-out;
            -webkit-animation-delay:1.2s;
            -webkit-animation-iteration-count:infinite;


        }
        &:after
        {
            position: absolute;
            left: -8px;

            display: block;

            width: 38px;
            height: 8px;

            content: '';

            border-radius: 55%;
            background-color: transparent;
            box-shadow: 0 3px 0 $monsterDarkRed inset;
        }
    }
    .teeth
    {
        position: absolute;
        bottom: 0;
        left: 18px;

        width: 42px;
        height: 10px;
        &:before
        {
            position: absolute;
            z-index: 3;
            bottom: 0;
            left: 0;

            display: block;

            width: 8px;
            height: 8px;

            content: '';

            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            background-color: white;
        }
        &:after
        {
            position: absolute;
            z-index: 3;
            right: 0;
            bottom: 0;

            display: block;

            width: 8px;
            height: 8px;

            content: '';

            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            background-color: white;
        }
    }
    .body
    {
        position: absolute;
        top: 66px;
        left: 11px;

        overflow: hidden;

        width: 80px;
        height: 95px;

        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        background-color: $monsterred;
        &:after
        {
            position: absolute;
            top: 23px;
            right: 15px;

            display: block;

            width: 4px;
            height: 4px;

            content: '';

            border-radius: 50%;
            background-color: $monsterDarkRed;
        }
        &:before
        {
            position: absolute;
            top: 13px;
            right: 21px;

            display: block;

            width: 6px;
            height: 6px;

            content: '';

            border-radius: 50%;
            background-color: $monsterDarkRed;
            box-shadow: 12px 0 0  $monsterDarkRed;
        }
        .drool
        {
            position: absolute;
            top: 0;
            left: 12px;

            width: 20px;
            height: 20px;
            &:before
            {
                position: absolute;
                z-index: 3;
                top: 0;
                left: 2px;

                display: block;

                width: 4px;
                height: 19px;

                content: '';

                border-bottom-right-radius: 22%;
                border-bottom-left-radius: 22%;
                background-color: $monsterblue;
                box-shadow: 17px -9px 0  $monsterblue;
            }
            &:after
            {
                position: absolute;
                z-index: 3;
                top: 0;
                right: 2px;

                display: block;

                width: 4px;
                height: 7px;

                content: '';

                border-bottom-right-radius: 50%;
                border-bottom-left-radius: 50%;
                background-color: $monsterblue;
            }
        }
        .bellyBotton
        {
            position: absolute;
            z-index: 2;
            top: 54px;
            left: 27px;

            width: 17px;

            background-color: transparent;
            &:before
            {
                position: absolute;
                z-index: 3;
                top: 9px;
                left: 12px;

                display: block;

                width: 3px;
                height: 3px;

                content: '';

                border-radius: 50%;
                background-color: $monsterDarkRed;
            }
            &:after
            {
                position: absolute;
                z-index: 3;
                top: 5px;
                left: 10px;

                display: block;

                width: 8px;
                height: 5px;

                content: '';

                border-radius: 50%;
                box-shadow: 0 1px 0 $monsterDarkRed inset;
            }
        }
        .underpants
        {
            position: absolute;
            bottom: 0;
            left: 0;

            width: 80px;
            height: 26px;

            border-top: 3px solid $monsterDarkRed ;
            background-color: $monsterDarkRed ;
            box-shadow: 0 2px 0 $monsterred inset;
            &:before
            {
                position: absolute;
                bottom: -9px;
                left: 9px;

                width: 20px;
                height: 20px;

                content: '';

                border-radius: 50%;
                background-color: $monsterred;
            }
            &:after
            {
                position: absolute;
                right: 9px;
                bottom: -9px;

                width: 20px;
                height: 20px;

                content: '';

                border-radius: 50%;
                background-color: $monsterred;
            }
        }
    }
    .legs
    {
        position: absolute;
        z-index: 2;
        bottom: -1px;
        left: 22px;

        width: 57px;
        height: 30px;
         animation-name:moveFeet;
            animation-duration:3s;
            animation-timing-function:ease;
            animation-delay:1s;
            animation-iteration-count:infinite;
            
            -webkit-animation-name:moveFeet;
            -webkit-animation-duration:3s;
            -webkit-animation-timing-function:ease;
            -webkit-animation-delay:1s;
            -webkit-animation-iteration-count:infinite;
        &:before
        {
            border-radius: 50%;
			content: "";
			height: 26px;
			right: 11px;
			position: absolute;
			top: 0;
			width: 10px;
			box-shadow:-3px  0 0 $monsterred inset;
        }
        &:after
        {
			border-radius: 50%;
			content: "";
			height: 26px;
			left: 11px;
			position: absolute;
			top: 0;
			width: 10px;
			box-shadow:3px  0 0 $monsterred inset;

        }
        .feet{
        	position: absolute;
        	bottom: 0;
        	 width: 57px;
        	 height: 10px;
        	&:before{
				border-bottom: 0 solid transparent;
				border-right: 19px solid #c42b2e;
				border-top: 5px solid transparent;
				bottom: 4px;
				content: "";
				height: 0;
				left: -3px;
				position: absolute;
				width: 0;
        	}
        	&:after{
				border-bottom: 0 solid transparent;
				border-left: 19px solid #c42b2e;
				border-top: 5px solid transparent;
				bottom: 4px;
				content: "";
				height: 0;
				right: -3px;
				position: absolute;
				width: 0;
        	}
        }
    }
    .shadow
    {
        position: absolute;
        z-index: 1;
        bottom: -69px;
        left: -17px;

        width: 137px;
        height: 140px;

        transform: rotateX(85deg);
        opacity: 0.2;
        border-radius: 50%;
        background-color: #f2f2f2;
    }
}

/*Animations*/
@keyframes moveEye {
0% {left:8px;top:8px;}
25% {left: 14px;top:4px;}
50% {left:3px;top:4px;}
75% {left:3px;top:13px;}
100% {left:8px;top:8px;}
/*40% {left:10px;top:10px;}
50% {left:10px;top:10px;}
60% {left:10px;top:10px;}
70% {left:10px;top:10px;}
80% {left:10px;top:10px;}
90% {left:10px;top:10px;}
1000% {left:10px;top:10px;}*/



}
@keyframes moveFeet {
0% {transform:rotate(0deg);}
25%{transform:rotate(5deg)}
50%{transform:rotate(-5deg)}
100% {transform: (0deg);}


}


@keyframes moveMonster {
0% {transform:translate(0);}
25%{transform:translate(25px)}
50%{transform:translate(-25px)}
100% {transform:translate(0);}


}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.