CSS slider - 4-slides

.slide1, .slide2, .slide3, .slide3{
	will-change:background-position, opacity;
}

.mainslider{
position:relative;
height:100vh;
background:white;
}


.sliderc {
    position: absolute;
   inset:0;
   margin: auto;
}


.slide1 {
animation-name: slc1;
-webkit-animation-name: slc1;
-moz-animation-name: slc1;
animation-duration: 16s;
-webkit-animation-duration: 16s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count:infinite;

}

@keyframes slc1 {
0% { z-index:10; opacity:1; background-position: 0% 100%;}
24% { z-index:10; opacity:1;}
25% { z-index:10; opacity:0; }
99% { z-index:10; opacity:0; background-position: 100% 0%;}
100% { z-index:10;opacity:1;  }
}

.slide2 {
animation-name: slc2;
-webkit-animation-name: slc2;
-moz-animation-name: slc2;
animation-duration: 16s;
-webkit-animation-duration: 16s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count:infinite;

}

@keyframes slc2 {
0% { z-index:9; opacity:0; background-position: 0% 100%;}
24% { z-index:9; opacity:0;}
25% { z-index:11; opacity:1; }
49% { z-index:11; opacity:1; }
50% { z-index:11; opacity:0; }
100% { z-index:11; opacity:0; background-position: 100% 0%;}
}


.slide3{
animation-name: slc3;
-webkit-animation-name: slc3;
-moz-animation-name: slc3;
animation-duration: 16s;
-webkit-animation-duration: 16s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}

@keyframes slc3 {
0% { z-index:8; opacity:0; background-position: 0% 100%; }
49% { z-index:8; opacity:0;   }
50% { z-index:12; opacity:1; }
74% { z-index:12; opacity:1; }
75% { z-index:12; opacity:0;  }
100% { z-index:12; opacity:0; background-position: 100% 0%;}
}


.slide4{
animation-name: slc4;
-webkit-animation-name: slc4;
-moz-animation-name: slc4;
animation-duration: 16s;
-webkit-animation-duration: 16s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}

@keyframes slc4 {
0% { z-index:7; opacity:0; background-position: 0% 100%; }
74% { z-index:7; opacity:0;}
75% { z-index:13;  opacity:1;}
99% { z-index:13;  opacity:1;}
100% { z-index:13;opacity:0; background-position: 100% 0%;}
}