Continues Slider Using Css3 Animation Keyframes

I am building a slider using css3. Now slider is running continuously but the flow is not right. After slide 4 the slider is going back from left to right all the way down to the f

Solution 1:

I have set a different solution to avoid duplicating the first image

The animation is more complex, but you can reuse it setting delays

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  border: 5px solid #fff;
  overflow: hidden;
}
#slideshow img {
  position: absolute;
  left: 0px;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  animation-delay: -1.25s;
}
#slideshow img:nth-child(3) {
  animation-delay: -2.5s;
}
#slideshow img:nth-child(4) {
  animation-delay: -3.75s;
}
@keyframes slide {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-200px);
    opacity: 1;
  }
  30% {
    transform: translateX(-200px);
    opacity: 0;
  }
  90% {
    transform: translateX(200px);
    opacity: 0;
  }
  95% {
    transform: translateX(200px);
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
  }

<div id="slideshow">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
  <img src="http://placehold.it/200x400/72A94C/FFFFFF">
  <img src="http://placehold.it/200x400/A94F83/FFFFFF">
  <img src="http://placehold.it/200x400/F9E934/FFFFFF">
</div>

Solution 2:

Reason:

The reason you are seeing this reverse movement is because between 75% and 100% of animation's duration the element image is moving from -600px to 0px. This movement will be gradual just as with the rest of the movement and since there is a significant period of time (1.25s), you get to see it.

---

Solution 1: (instant switch between 4 -> 1, may not be what you're after)

You can hide this reverse movement by making sure that the movement from -600px to 0px is done instantaneously. To do this, alter the keyframes like in the below snippet. In this case, the movement from -600px to 0px happens over a very short period of time (0.001% of the animation duration) and so it wouldn't be visible to the eye.

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
}
#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 5s infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  33.333% {
    transform: translateX(-200px)
  }
  66.666% {
    transform: translateX(-400px)
  }
  99.999% {
    transform: translateX(-600px)
  }
  100% {
    transform: translateX(0px)
  }
}

<div id="slideshow">
  <img src="http://oi67.tinypic.com/24mia39.jpg">
</div>

---

Solution 2: (slide movement between 4 -> 1)

Alternately, if you want 4 -> 1 also to be slide movement instead of instantaneous (which may very well be your question) then you may have to use more than one img element. The time when 1st image moves out of view (that is goes from -600px to -800px), the second one would start coming in and thus would produce a continuous effect. This wouldn't be possible with a single one.

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
}
#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  position: absolute;
  left: 200px;
  top: 0;
  animation: slide 5s infinite 3.75s;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  25% {
    transform: translateX(-200px)
  }
  50% {
    transform: translateX(-400px)
  }
  75% {
    transform: translateX(-600px)
  }
  100% {
    transform: translateX(-800px)
  }
}

<div id="slideshow">
  <img src="http://oi67.tinypic.com/24mia39.jpg">
  <img src="http://oi67.tinypic.com/24mia39.jpg">
</div>

Below is a variant of the same solution with multiple images instead of one with 4 pieces.

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
}
#slideshow img {
  position: absolute;
  left: 0px;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  left: 200px;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(3) {
  left: 200px;
  animation: slide 5s infinite 1.25s;
}
#slideshow img:nth-child(4) {
  left: 200px;
  animation: slide 5s infinite 2.5s;
}
#slideshow img:nth-child(5) {
  left: 200px;
  animation: slide 5s infinite 3.75s;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  25% {
    transform: translateX(-200px)
  }
  50%, 100% {
    transform: translateX(-400px)
}

<div id="slideshow">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
  <img src="http://placehold.it/200x400/72A94C/FFFFFF">
  <img src="http://placehold.it/200x400/A94F83/FFFFFF">
  <img src="http://placehold.it/200x400/F9E934/FFFFFF">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
</div>

---

Solution 3: (no need duplicate image if you have separate images)

If you have multiple images instead of one single sprite like image, the cyclic sliding animation can be achieved without duplicating any images also. Below is a variant of vals' answer with a slightly simpler keyframe configuration. (Note: It is better to preload images to avoid blank screen till they get loaded.)

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  border: 5px solid #fff;
  overflow: hidden;
}
#slideshow img {
  position: absolute;
  left: 0px;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  animation-delay: 1.25s;
  opacity: 0;
}
#slideshow img:nth-child(3) {
  animation-delay: 2.5s;
  opacity: 0;
}
#slideshow img:nth-child(4) {
  animation-delay: 3.75s;
  opacity: 0;
}
@keyframes slide {
  0% {
    transform: translateX(200px);
    opacity: 1;
  }
  25% {
    transform: translateX(0px);
    opacity: 1;
  }
  50% {
    transform: translateX(-200px);
    opacity: 1;
  }
  50.1%,
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}

<div id="slideshow">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
  <img src="http://placehold.it/200x400/72A94C/FFFFFF">
  <img src="http://placehold.it/200x400/A94F83/FFFFFF">
  <img src="http://placehold.it/200x400/F9E934/FFFFFF">
</div>

Solution 3:

The only way I see it possible is if you duplicate the first element on the img itself and on the keyframes animation on the last step don't go to 0, instead go to the last element which will be the 1 again. Check this snippet:

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
  background: yellow;
}
#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 5s infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  25% {
    transform: translateX(-200px)
  }
  50% {
    transform: translateX(-400px)
  }
  75% {
    transform: translateX(-600px)
  }
  100% {
    transform: translateX(-800px)
  }
}

<div id="slideshow">
  <img src="http://i.imgur.com/Ze4efyP.jpg">
</div>

---

Final Image for loop will be like this:

Solution 4:

Here is a good example of a pure css3 slider which works just as a normal slider and does not have reverse transition. Also much better code and handling. Hope this article helps you and others.

https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/#9

This will help in learning and using animation handling on how to make your own slider smooth. Also the guy explained in detail what is needed to build a pure CSS3 slider.

P.S. The people who want to negative mark this are the ones who don't want to learn and understand the technology they are using and are the ones looking for shortcuts.

Sample Code as proof that i made using animation: after reading and understanding the article above as follows: