CSS slider - 3-slides

.slide1, .slide2, .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; }
34% { z-index:10; opacity:1; }
35% { z-index:10; opacity:0; }
99% { z-index:10;opacity:0; }
100% { z-index:13;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;}
34% { z-index:9; opacity:0; }
35% { z-index:11; opacity:1; }
74% { z-index:11; opacity:1; }
75% { z-index:11; opacity:0; }
100% { z-index:11; opacity: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; }
74% { z-index:8; opacity:0;  }
75% { z-index:12; opacity:1;  }
99% { z-index:12; opacity:1; }
100% { z-index:12; opacity:0; }
}