@keyframes sofa {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
        right: 25px;
        top: 0px;
    }
    50% {
        right: 50px;
        top: 0px;
    }
    75% {
        right: 75px;
        top: 0px;
    }
    100% {
        right: 100px;
        top: 0px;
    }
}

@keyframes hammer {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: 0px;
        top: 75px;
    }
    50% {
        left: 0px;
        top: 0px;
    }
    75% {
        left: 0px;
        top: -75px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes skin {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
        right: 50px;
        top: 0px;
    }
    50% {
        right: 0px;
        top: 0px;
    }
    75% {
        right: -50px;
        top: 0px;
    }
    100% {
        right: 0px;
        top: 0px;
    }
}

@keyframes train {
    0% {
        right: -1000px;
        top: 0px;
    }
    25% {
        right: -500px;
        top: 0px;
    }
    50% {
        right: 0px;
        top: 0px;
    }
    75% {
        right: 500px;
        top: 0px;
    }
    100% {
        right: 1000px;
        top: 0px;
    }
}


/* The element to apply the animation to */

#rightimg {
    position: relative;
    animation-name: sofa;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#leftimg {
    position: relative;
    animation-name: hammer;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#topimg {
    position: relative;
    animation-name: skin;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#bottomimg {
    position: relative;
    animation-name: train;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}