.puppe1-animation{
    animation: puppe1 3s linear 1;
}
.puppe2-animation{
    animation: puppe1 3s linear 1;
}
.puppe3-animation{
    animation: puppe2 3s linear 1;
}
.puppe4-animation{
    animation: puppe2 3s linear 1;
}


@keyframes puppe1 {
    0% {
        transform: translate(-500px);
    }
    100%{
        animation: puppe-haengt 3s linear infinite;
    }
}
@keyframes puppe2 {
    0% {
        transform: translate(500px);
    }
    100%{
        animation: puppe-haengt 3s linear infinite;
    }
}

.puppe1-haengt{
    animation-duration: 4s;
    animation-name: puppe-haengt;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}
.puppe2-haengt{
    animation-duration: 4s;
    animation-name: puppe-haengt2;
    animation-iteration-count: infinite;
}
.puppe3-haengt{
    animation-duration: 4s;
    animation-name: puppe-haengt;
    animation-iteration-count: infinite;
}
.puppe4-haengt{
    animation-duration: 4s;
    animation-name: puppe-haengt2;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}



@keyframes puppe-haengt {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(1deg);
    }
    50%{
        transform: rotate(-1deg);
    }
    75%{
        transform: rotate(1deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes puppe-haengt2 {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-2deg);
    }
    50%{
        transform: rotate(2deg);
    }
    75%{
        transform: rotate(-2deg);
    }
    100%{
        transform: rotate(0deg);
    }
}