Mouth Animation - Monster

index.pug

div.main
    div.monster
        div.monster__face
            div.monster__eyes
                div.monster__eye
                div.monster__eye
            div.monster__mouth
                div.monster__top
                div.monster__bottom

mouth-animation-monster.markdown

Mouth Animation - Monster

A Pen by Ricardo Oliva Alonso on CodePen.

License.

script.js

/*
Designed by: Gigantic
Original image: https://dribbble.com/shots/4827413-Mouth-Animation
*/

style.scss

/* Variables */
$bg: #1C27B5;
$blue: #3C47D7;
$blue-s: #07129C;
$black: #000000;
$yellow: #FFC333;

$red-1: #810332;
$red-2: #400018;
$pink: #DC1B50;
$white: #ffffff;


/* Reset */
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Generic */
body{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100vh;
    background-color: $bg;
}
.main{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 800px;
    height: 600px;
	
		transform-origin: bottom;

	@media(max-width: 800px){ transform: scale(.7); }
	@media(max-width: 700px){ transform: scale(.6); }
	@media(max-width: 500px){ transform: scale(.5); }
	@media(max-width: 400px){ transform: scale(.3); }
}
.monster{
    display: flex;
    justify-content: center;
    position: relative;
    width: 370px;
    height: 490px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    background-color: $blue;
    box-shadow: 80px 80px 0 $blue-s;

    &__face{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        top: 19%;
        width: 75%;
        height: 200px;
    }

    &__eyes{
        display: flex;
        justify-content: space-between;
        width: 28%;
        height: auto;
        margin-bottom: 10px;
    }
        &__eye{
            width: 17px;
            height: 30px;
            border-radius: 20px;
            background: $black;
        }
    &__mouth{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: 0%;
        overflow: hidden;
        border: 25px solid $yellow;
        border-radius: 100px;
        background-color: $red-1;
        animation: mouth 1.75s infinite;

        &::before{
            content: '';
            position: absolute;
            width: 150px;
            height: 80px;
            border-radius: 100px;
            background-color: $red-2;
        }
        &::after{
            content: '';
            position: absolute;
            bottom: -80px;
            width: 160px;
            height: 80px;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            background-color: $pink;
            animation: tongue 1.75s infinite;
        }
    }
    &__top{
        position: absolute;
        top: -30px;
        width: 170px;
        height: 30px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: $white;
        z-index: 100;
        animation: t 1.75s infinite;
    }
    &__bottom{
        position: absolute;
        bottom: 0;
        width: 100px;
        height: 30px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: $white;
        z-index: 100;
        animation: b 1.75s infinite;

    }
}
/**/
@keyframes t {
    0%, 10%, 80%, 100%{ top: -30px;}
    20%{top: 0px;}
    30%{top: -20px;}
    40%{top: -0px;}
    50%{top: -25px;}
    70%{top: 0px;}
}
@keyframes b {
    0%, 10%, 80%, 100%{ bottom: -30px;}
    20%{bottom: 0px;}
    30%{bottom: -20px;}
    40%{bottom: -0px;}
    50%{bottom: -25px;}
    70%{bottom: 0px;}
}
@keyframes mouth {
    0%, 10%, 100%{
        width: 100%;
        height: 0%;
    }
    15%{
        width: 90%;
        height: 30%;
    }
    20%{
        width: 50%;
        height: 70%;
    }
    25%{
        width: 70%;
        height: 70%;
    }
    30%{
        width: 80%;
        height: 60%;
    }
    35%{
        width: 60%;
        height: 70%;
    }
    40%{
        width: 55%;
        height: 75%;
    }
    45%{
        width: 50%;
        height: 90%;
    }
    50%{
        width: 40%;
        height: 70%;
    }
    55%{
        width: 70%;
        height: 95%;
    }
    60%{
        width: 40%;
        height: 50%;
    }
    65%{
        width: 100%;
        height: 60%;
    }
    70%{
        width: 100%;
        height: 70%;
    }
    75%{
        width: 90%;
        height: 70%;
    }
    80%{
        width: 50%;
        height: 70%;
    }
    85%{
        width: 90%;
        height: 50%;
    }
    85%{
        width: 40%;
        height: 70%;
    }
    90%{
        width: 90%;
        height: 30%;
    }
    95%{
        width: 100%;
        height: 10%;
    }

}
@keyframes tongue {
    0%, 20%, 100% {bottom: -80px; }
    30%, 90%{ bottom: -40px; }
    40%{ bottom: -45px; }
    50%{ bottom: -50px; }
    70%{ bottom: -80px; }
    90%{ bottom: -40px; }
}