* {
    transform-origin: 50%;
}

body {
    padding: 0;
    margin: 0;
    background-image: linear-gradient(skyblue, skyblue);
}

.wrapper {
    height: 100%;
}

​.jack, .head, .torso, .arm-left, .arm-right, .leg-left, .leg-right, .pull-rope {
    position: absolute;
    display: block;
    background: url(hampelmann.png) 0 0 no-repeat;
}

.jack {
    width: 1300px;
    height: 1300px;
}

.head {
    position: absolute;
    display: block;
    background-position: -50px -50px;
    top: 50px;
    left: 600px;
    width: 300px;
    height: 300px;
    z-index: 3;
}

.torso {
    position: absolute;
    display: block;
    background-position: -50px -400px;
    top: 300px;
    left: 500px;
    width: 500px;
    height: 600px;
    z-index: 2;
}

.arm-left {
    position: absolute;
    display: block;
    background-position: -600px -50px;
    top: 300px;
    left: 520px;
    width: 150px;
    height: 550px;
    z-index: 1;
    /* ANIMATION */
    transform-origin: 75px 75px;
    animation: swing-left-arm 3s ease-in-out 0s infinite alternate;
}

.arm-right {
    position: absolute;
    display: block;
    background-position: -800px -50px;
    top: 300px;
    left: 830px;
    width: 150px;
    height: 550px;
    z-index: 1;
    transform-origin: 75px 75px;
    animation: swing-right-arm 3s ease-in-out 0s infinite alternate;
}

.leg-left {
    position: absolute;
    display: block;
    background-position: -600px -700px;
    top: 700px;
    left: 550px;
    width: 150px;
    height: 550px;
    z-index: 1;
    transform-origin: 75px 75px;
    animation: swing-left-leg 3s ease-in-out 0s infinite alternate;
}

.leg-right {
    position: absolute;
    display: block;
    background-position: -800px -700px;
    top: 700px;
    left: 800px;
    width: 150px;
    height: 550px;
    z-index: 1;
    transform-origin: 75px 75px;
    animation: swing-right-leg 3s ease-in-out 0s infinite alternate;
}

.pull-rope {
    position: absolute;
    display: block;
    background-position: -1000px -375px;
    top: 600px;
    left: 675px;
    width: 150px;
    height: 550px;
    z-index: 0;
    animation: pull-the-rope 3s ease-in-out 0s infinite alternate;
}

/* ANMINATIONS */
@keyframes swing-left-arm {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(85deg);
    }

    50% {
        transform: rotateZ(80deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes swing-right-arm {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(-85deg);
    }

    50% {
        transform: rotateZ(-80deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes swing-left-leg {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(55deg);
    }

    50% {
        transform: rotateZ(45deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes swing-right-leg {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(-55deg);
    }

    50% {
        transform: rotateZ(-45deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes pull-the-rope {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(70px);
    }

    50% {
        transform: translateY(60px);
    }

    100% {
        transform: translateY(0px);
    }
}