Слайдер с зумом и эффектом движения

Question

Я пытаюсь создать слайдер только для CSS с эффектом увеличения.

Единственное, что я не могу сделать, - это изменить масштаб от одного слайда до другого. Например, я бы хотел, чтобы на первом слайде был текущий эффект масштабирования, но он двигался медленно справа налево, второй слева направо и третий сверху вниз. Любая помощь?

Здесь - это 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

Вы можете сделать это, установив свойство background-position в вашей анимации.

Я добавил background-position: 0px 0px; к slideShow { 0% {} и background-position: -400px 0px; к slideShow { 100% {}.

Теперь изображение медленно перемещается влево.

* {
     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/