Slider with zoom and movement effect - css

Question

I’m trying to build a css only Slider with zoom effect.
The thing I’m not able to do is to difference the zoom from one slide to the other. For example I would like the first slide to have the current zoom effect but going slowly from right to left, the second from left to right and the third from top to bottom.
Any help?
Here is the Jsfiddle
<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>

Answer 1

You can accomplish this by setting the property background-position in your animation.
I added background-position: 0px 0px; to slideShow { 0% {} and background-position: -400px 0px; to slideShow { 100% {}.
Now the image moves slowly to the left.
* {
margin: 0;
padding: 0;
}
.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
/*animation*/
animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}
figurecaption {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
}
.pic-1 {
opacity: 1;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* keyframes*/
#keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
transform:scale(1);
-ms-transformm:scale(1);
}
}
#-o-keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
-o-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-o-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
-o-transformm:scale(1);
}
}
#-moz-keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
-moz-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
-moz-transformm:scale(1);
}
}
#-webkit-keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
-webkit-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
-webkit-transformm:scale(1);
}
}
<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>
JSFiddle: https://jsfiddle.net/53gpxtk1/23/