Pure CSS slider

by LuckyCat

HTML

<!-- original https://codepen.io/hw/pen/KKRzra -->
<body style="background-color:#eeeeee; margin: auto; text-align: center;">
<!-- Start cssSlider.com -->
	<div class='csslider1 autoplay '>
		<ul>
			<li class='num0 img'>
				 <img src='https://ktonanovenkogo.ru/image/pauerlifting.jpg' alt='Buns' title='Buns' />
			</li>
			<li class='num1 img'>
				 <img src='https://st.depositphotos.com/1004920/4204/v/600/depositphotos_42045793-stock-illustration-bodybuilding-and-powerlifting-vector.jpg' alt='Croissant' title='Croissant' />
			</li>
			<li class='num2 img'>
				 <img src='https://static.wixstatic.com/media/b93d7b_62d2f1cd9042483a86abec5dfb66233f.jpg/v1/fill/w_513,h_469,al_c,q_90/b93d7b_62d2f1cd9042483a86abec5dfb66233f.jpg' alt='Lemon pie' title='Lemon pie' />
			</li>		
		</ul>
		
		
		</div>
		<!-- End cssSlider.com -->
  </body>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.csslider1 {
	display: inline-block;
	position: relative;
	max-width: 480px;
	
	width: 100%;
	margin-top: 10px;
}
.csslider1 > ul {
	position: relative;
	z-index: 1;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 0;
  width: 480px;
  height: 260px;
	
	overflow: hidden;
	white-space: nowrap;
}
.csslider1 > ul > li.img img {
	width: 100%;
}
.csslider1 > ul > li.img {
	font-size: 0pt;

	-khtml-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.csslider1 > ul > li {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	opacity: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;	
	

	transform: translate3d(0,0,0);  
  transition: opacity 2000ms ease, transform 24000ms linear;  	
}





/* calculate autoplay */
@keyframes kenbernsBR {
	0%, 100% { transform: scale(1); opacity: 0 }
	8.333333333333334%, 33.333333333333336% { opacity: 1 }
	41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsBL {
	0%, 100% { transform: scale(1); opacity: 0 }
	8.333333333333334%, 33.333333333333336% { opacity: 1 }
	41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsTL {
	0%, 100% { transform: scale(1); opacity: 0 }
	8.333333333333334%, 33.333333333333336% { opacity: 1 }
	41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsTR {
	0%, 100% { transform: scale(1); opacity: 0 }
	8.333333333333334%, 33.333333333333336% { opacity: 1 }
	41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}


@keyframes kenberns {
    0%, 100% { transform: scale(1); opacity: 0; }
	  8.333333333333334%, 33.333333333333336% { opacity: 1; }    
    41.66666666666667%,...