.slider-container {
    width: 800px;
    height: 290px;
    margin: 30px auto 0;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.image-container {
    width: 4000px;
    height: 400px;
   clear: both;
    position: relative;

    animation-name: slider;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: backwards;
    animation-play-state: running;
}


.slider-image {
	width: 800px;
    height: 226px;
    float: left;
    position: relative;
}


 @keyframes slider {
    0% {
        transform: translate(0, 0);
    }
	25% {
        transform: translate(-800px, 0);
    }
	
    50% {
        transform: translate(-1600px, 0);
    }
    75% {
        transform: translate(-2400px, 0);
    }
	100% {
        transform: translate(-3200px, 0);
    }
}

@keyframes slider1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-800px, 0);
    }
    100% {
        transform: translate(-1600px, 0);
    }
}