Simple CSS slider

A simple slider in pure CSS, with 5 images

HTML

<div class="slider">
  <ul>
    <li>
      <img src="https://www.guyom-design.com/blog/images/1.jpg" alt="img1">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/2.jpg" alt="img2">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/3.jpg" alt="img3">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/4.jpg" alt="img4">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/5.jpg" alt="img5">
    </li>
  </ul>
</div>

CSS

.slider {
  overflow: hidden;
}

.slider ul {
  animation: animation_slide 20s infinite;
  display: flex;
  margin: 0;
  padding: 0;
  width: 500%;
}

.slider li {
  list-style: none;
}

.slider img {
  width: 100%;
}

@keyframes animation_slide {
  0%, 10% { margin-left: 0; }
  20%, 30% { margin-left: -100%; }
  40%, 50% { margin-left: -200%; }
  60%, 70% { margin-left: -300%; }
  80%, 90% { margin-left: -400%; }
}