<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);
	}
}