<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">
<img src="https://png.icons8.com/ios/540/dog-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 1s forwards;
}
.demo img:nth-child(2) {animation-delay: 1s;}
.demo img:nth-child(3) {animation-delay: 2s;}
.demo img:nth-child(4) {animation-delay: 3s;}
.demo img:nth-child(5) {animation-delay: 4s;}
@keyframes anim {
50%{transform:scale(1)}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.