<div class="wrapper">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
body {
box-sizing: border-box;
background: black;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
align-items: center;
padding: 2rem;
}
.el {
--delay: calc(var(--i, 1) * 400ms);
animation: fadeIn 1200ms var(--delay) forwards;
width: 15rem;
height: 15rem;
background: #f542d7;
margin: 20px;
opacity: 0;
transform: scale(0);
}
.el:nth-child(2) {
--i: 2;
}
.el:nth-child(3) {
--i: 3;
}
@keyframes fadeIn {
100% {
opacity: 1;
transform: scale(1);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.