Carlos Carlos - 1 month ago 18
CSS Question

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 first slide.

What I want after the last slide the first slide should come from right to left as it is coming in manner for other slide.

Will it be possible by css only?

@keyframes slide{
0%{ transform:translateX(0px) }
25%{ transform:translateX(-200px) }
50%{ transform:translateX(-400px) }
75%{ transform:translateX(-600px) }
100%{ transform:translateX(0px) }
}


fiddle

Answer

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>

Comments