<div class="demo"> <img src="https://png.icons8.com/ios/540/pig-filled.png"> <img src="https://png.icons8.com/ios/540/cat-filled.png"> <img src="https://png.icons8.com/ios/540/bull-filled.png"> <img src="https://png.icons8.com/ios/540/chicken-filled.png"> </div>
.demo {
	width: 120px;
	height: 120px;
	border: 1px solid;
	position:relative;
  overflow:hidden;
}
.demo img {
	position:absolute;
	left:0;right:0;top:0;
	bottom:0;
	margin:auto;
	width: 120px;
	height:120px;
	overflow:hidden;
 	transform:scale(0);
	animation: anim 24s infinite;
  /* Maths: 24s = 4 images * 6s */
}
/* MATHS: delay= (img count -1) * 6s*/
.demo img:nth-child(2) {animation-delay: 6s;}
.demo img:nth-child(3) {animation-delay: 12s;}
.demo img:nth-child(4) {animation-delay: 18s;}
@keyframes anim {
  12.5% {transform:scale(1)}
  25% {transform:scale(0)
}

  
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.