html - How can I make my slideshow repeating without JS?

Question

I'm currently trying to make my image slideshow repeating so that it jumps back to the beginning or repeat with the first image when the slideshow is over. Somehow it's not working and I don't get it.

This is my demo:

#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  animation: scroll-left 220s linear infinite;
  animation-iteration-count: infinite;
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(calc(-1000rem + 100vw))
  }
}

<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>

Answer 1

It seems like it is working. It is just you gave the animation a 220s to execute so need to wait that long before it starts again.

You should fix the calculation of the translation, because it disappears way before the 220s are over.

Your final keyframe should be the current element width, which you can retrieve after rendering and requires javascript. you can try -100vw but it won't be accurate as well.

Plus, I reduced the speed to 20s but you can speed it down if you want. Everything else is alright. infinite will do what you desire.

Run this snippet:

#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  animation: scroll-left 20s linear infinite;
  animation-iteration-count: infinite;
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100vw)
  }
}

<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>