<div class="demo"> 
  <img src="https://picsum.photos/id/237/200/200"> 
  <img src="https://picsum.photos/id/238/200/200"> 
  <img src="https://picsum.photos/id/1015/200/200"> 
  <img src="https://picsum.photos/id/240/200/200"> 
</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 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;}
.demo img:nth-child(1) {
  animation: anim 6s, anim2 6s 24s forwards;
}
@keyframes anim {
 50% {transform:scale(1);}
}
@keyframes anim2 {
 100% {transform:scale(1);}
}