#gruebchen {
    position: absolute;
    animation-name: gruebchen;
    animation-duration: 3s;
}

#mund {
    position: absolute;
    animation-name: mund;
    animation-duration: 1.4s;
}

@keyframes gruebchen {
    0% {
        transform: translateX(243%) translateY(-85%);
        -ms-transform: translateX(243%) translateY(-85%);
        -webkit-transform: translateX(243%) translateY(-85%);
    }
    50% {
        transform: initial;
        -ms-transform: initial;
        -webkit-transform: initial;
    }
    90% {
        transform: initial;
        -ms-transform: initial;
        -webkit-transform: initial;
    }
    95% {
        transform: translateY(-20%);
        -ms-transform: translateY(-20%);
        -webkit-transform: translateY(-20%);
    }
    100% {
        transform: initial;
        -ms-transform: initial;
        -webkit-transform: initial;
    }
}

@keyframes mund {
    0% {
        transform: scale(0) translateX(3000%);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: initial;
        opacity: initial;

    }
}