Pure CSS slider

by akash_payne

HTML

<div>
  <ul>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/bmw-13672.svg"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/Foyle-Food-Group-2766.gif"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/cb66da68-a918-42bd-970a-ce6d8d50eed2_image_jpeg.webp"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1536072887/microlise_logo_unsized.png"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1536072891/blackhawk_network_logo_unsized.png"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/copart-logo.png"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/citysprint.png"></li>
    <li><img class="slider-image" class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/subway-12.svg"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389851/Audi-logo-1999-1920x1080.png"></li>
    <li><img class="slider-image" src="https://res.cloudinary.com/dh36guqr8/image/upload/v1540389850/Rac_logo.svg.png"></li>

  </ul>
</div>

CSS

body {
  padding: 50px;
  font-size: 30px;
}

div {
  display: block;
  overflow: hidden;
  width: 200px;
  height: 100px;
}

.slider-impage {
  width: 100%;
  height: 100%;
}

ul {
  -moz-animation-name: slider;
  -moz-animation-duration: 20s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-name: slider;
  -webkit-animation-duration: 20s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  list-style: none;
  width: 10000px;
  height: 100px;
  margin-left: -880px;
  background-color: hsla(0, 100%, 50%, 1);
}

ul li {
  display: block;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-right: 20px solid #FFFFFF;
  floaT: left;
  color: #FFFFFF;
}

@-moz-keyframes slider {
  0% {
    margin-left: 0px;
  }
  28% {
    margin-left: 0px;
    background-color: hsla(0, 100%, 50%, 1);
  }
  30% {
    margin-left: -220px;
    background-color: hsla(50, 100%, 50%, 1);
  }
  48% {
    margin-left: -220px;
    background-color: hsla(50, 100%, 50%, 1);
  }
  50% {
    margin-left: -440px;
    background-color: hsla(100, 100%, 50%, 1);
  }
  68% {
    margin-left: -440px;
    background-color: hsla(100, 100%, 50%, 1);
  }
  70% {
    margin-left: -660px;
    background-color: hsla(150, 100%, 50%, 1);
  }
  88% {
    margin-left: -660px;
    background-color: hsla(150, 100%, 50%, 1);
  }
  90% {
    margin-left: -880px;
    background-color: hsla(200, 100%, 50%, 1);
  }
  99% {
    margin-left: -880px;
    background-color: hsla(200, 100%, 50%, 1);
  }
  100% {
    margin-left: 0px;
    background-color: hsla(0, 100%, 50%, 1);
  }
}

@-webkit-keyframes slider {
  0% {
    margin-left: 0px;
  }
  28% {
    margin-left: 0px;
    background-color: hsla(0, 100%, 50%, 1);
  }
  30% {
    margin-left: -220px;
    background-color: hsla(50, 100%, 50%, 1);
  }
  48% {
    margin-left: -220px;
    background-color: hsla(50, 100%, 50%, 1);
  }
...