#rabbit, #osterhase {
    position: fixed;
    pointer-events: none;
}
@keyframes sleigh {
    0% {
        opacity: 0;
        -webkit-transform: translate(-102vw, 0) scaleX(-1);
        transform: translate(-102vw, 0) scaleX(-1) rotate(17deg);
    }
    12.5% {
        opacity: 1;
        -webkit-transform: translate(-75vw, 0) scaleX(-1);
        transform: translate(-75vw, 0) scaleX(-1) rotate(17deg);
    }
    25% {
        opacity: 1;
        -webkit-transform: translate(-50vw, 0) scaleX(-1);
        transform: translate(-50vw, 0) scaleX(-1) rotate(17deg);
    }
    37.5% {
        opacity: 1;
        -webkit-transform: translate(-25vw, 0) scaleX(-1);
        transform: translate(-25vw, 0) scaleX(-1) rotate(17deg);
    }
    100%,
    50% {
        -webkit-transform: translate(0, 0) scaleX(-1);
        transform: translate(0, 0) scaleX(-1) rotate(17deg);
        opacity: 0;
    }
}
#rabbit, #osterhase {
    -webkit-animation: sleigh linear 24s;
    animation: sleigh linear 24s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    background-size: contain;
    z-index: 5;
    left: 100%;
    bottom: -60px;
}

#rabbit.sleigh-1 {
    background-image: url(../img/rabbit.gif);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}
#osterhase.sleigh-1 {
    background-image: url(../img/osterhase.gif);
    background-repeat: no-repeat;
    width: 240px;
    height: 289px;
}