reverse keyframe direction of pure css horizontal img slider - css

Question

I am simply trying to reverse the direction my pure css horizontal image slider is sliding. I have tried altering the key frame animation portion with opposite direction, with both - position and toggling left to right, all my attempts do is allow one slide to slide in the correct direction and then just blank white space due to my images float: left;
Here is live jsFiddle. And here is a Jsfiddle of my attempt and how it's rendering (ie. not working. it slides through one image in the correct direction, but not the rest)
Also, my code below.
Mark-Up:
<div class="slider3">
<figure>
<img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
<img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
<img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
<img src="http://img00.deviantart.net/a251/i/2007/347/c/8/drunk_santa_by_yakuks.png">
</figure>
</div>
CSS:
.slider3 {
width: 100%;
max-width: 960px;
overflow: hidden;
}
.slider3 figure img {
width: 25%;
float: left;
background: red;
}
.slider3 figure{
width: 400%;
position: relative;
margin:0;
padding: 0;
animation: 10s slide infinite;
-webkit-animation: 10s slide infinite;
}
#-webkit-keyframes slide {
0% { left:0%; }
16% { left:0%; }
33% { left:-100%; }
49% { left:-100%; }
66% { left:-200%; }
82% { left:-200%; }
100% { left:-300%; }
}

Answer 1

Actually you don't have to do any modifications other than add animation-direction: reverse to the list of rules (or you can set it as a value in the animation shorthand). As you'd have guessed, adding this property-value pair would reverse the flow of your animation.
When you place 4 images on a page (with float: left and 100% width for each), the 1st image is at 0%, the 2nd is at 100%, 3rd at 200% and 4th at 300%. What your current animation does is - start with the left: 0% which means the first image is in view. After sometime the left offset is set as -100% and what this means is that the second image which was at 100% on the page will now get displayed (as 100% - 100% = 0% and so it lands in the viewing area). Similarly the 3rd and 4th also gets shown.
Now to reverse the animation, you need the left offset to start at -300% so that the fourth image is visible first and then it slides towards the right instead of slide towards the left. Note: If you want the first image in the DOM to show up first then change float:left to right for .slider3 figure img.
With fourth image in DOM appearing first: (float: left)
.slider3 {
width: 100%;
max-width: 960px;
overflow: hidden;
}
.slider3 figure img {
width: 25%;
float: left;
background: red;
}
.slider3 figure {
width: 400%;
position: relative;
margin: 0;
padding: 0;
animation: 10s slide infinite reverse backwards;
-webkit-animation: 10s slide infinite reverse backwards;
}
#-webkit-keyframes slide {
0% {
left: 0%;
}
16% {
left: 0%;
}
33% {
left: -100%;
}
49% {
left: -100%;
}
66% {
left: -200%;
}
82% {
left: -200%;
}
100% {
left: -300%;
}
}
#keyframes slide {
0% {
left: 0%;
}
16% {
left: 0%;
}
33% {
left: -100%;
}
49% {
left: -100%;
}
66% {
left: -200%;
}
82% {
left: -200%;
}
100% {
left: -300%;
}
}
<div class="slider3">
<figure>
<img src="http://lorempixel.com/200/200/nature/1">
<img src="http://lorempixel.com/200/200/nature/2">
<img src="http://lorempixel.com/200/200/nature/3">
<img src="http://lorempixel.com/200/200/nature/4">
</figure>
</div>
With first image in DOM appearing first: (float: right)
.slider3 {
width: 100%;
max-width: 960px;
overflow: hidden;
}
.slider3 figure img {
width: 25%;
float: right;
background: red;
}
.slider3 figure {
width: 400%;
position: relative;
margin: 0;
padding: 0;
animation: 10s slide infinite reverse backwards;
-webkit-animation: 10s slide infinite reverse backwards;
}
#-webkit-keyframes slide {
0% {
left: 0%;
}
16% {
left: 0%;
}
33% {
left: -100%;
}
49% {
left: -100%;
}
66% {
left: -200%;
}
82% {
left: -200%;
}
100% {
left: -300%;
}
}
#keyframes slide {
0% {
left: 0%;
}
16% {
left: 0%;
}
33% {
left: -100%;
}
49% {
left: -100%;
}
66% {
left: -200%;
}
82% {
left: -200%;
}
100% {
left: -300%;
}
}
<div class="slider3">
<figure>
<img src="http://lorempixel.com/200/200/nature/1">
<img src="http://lorempixel.com/200/200/nature/2">
<img src="http://lorempixel.com/200/200/nature/3">
<img src="http://lorempixel.com/200/200/nature/4">
</figure>
</div>
You'd notice that I have added a backwards also to the animation short-hand property. This stands for animation-fill-mode and it makes the element hold the state as at its last keyframe until the time the animation starts. If this isn't added there will be a snap at the start where the first image will display before immediately changing to 4th (no slide) with float:left and vice-versa for float: right.
Amr Aly's second answer will work (and there are other possible ways too) but there is absolutely no reason to make it so complex.