body, html, ul, li, img, div{
  margin:0; padding:0;
}
body{
  width:100%;
  margin: 50px auto;
}
.auto-slider img{
  display:block;
  
}
.auto-slider{
  max-width: 1000px;
  position: relative;
  margin: auto;
  
  overflow-x:hidden;
}

.auto-slider__content{
  list-style:none;
  display:flex;
  /*-webkit-animation-name: slide;
  -webkit-animation-duration: 5.0s;
  animation-name: slide;
  animation-duration: 5.0s;*/
   animation-name: slide;
  animation-duration:50s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-in-out; 
  
  /*animation: slide 20s ease-in-out infinite;*/
/*   animation-direction: alternate-reverse; */
}
.auto-slider__content:hover{
  animation-play-state:paused;    
}

/*@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}*/
@keyframes slide{
  10%{
    transform:translateX(0);
  }
  15%, 30%{
    transform:translateX(-1000px);
  }
  35%, 50%{
    transform:translateX(-2000px);
  }
  55%, 70%{
    transform:translateX(-3000px);
  }
  75%, 90%{
    transform:translateX(0);
  }
  
}