html, body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(lightpink, white);
}

.heart {
	display: grid;
	grid-gap: 2px;
	grid-template-columns: repeat(9, 1fr);
}

.heart > * {
	width: 1em;
	height: 1em;
	font-size: 30px;
}

.heart dot {
	background-color: red;
	animation: animate 5s infinite ease-out;
	filter: opacity(0);
}

.heart dot:nth-of-type(2n) {
	animation-delay: 0.2s;
}

.heart dot:nth-of-type(3n) {
	animation-delay: 0.3s;
}

.heart dot:nth-of-type(4n) {
	animation-delay: 0.4s;
}

.heart dot:nth-of-type(5n) {
	animation-delay: 0.5s;
}

.heart dot:nth-of-type(6n) {
	animation-delay: 0.6s;
}

.heart dot:nth-of-type(7n) {
	animation-delay: 0.7s;
}

.heart dot:nth-of-type(8n) {
	animation-delay: 0.8s;
}

.heart dot:nth-of-type(9n) {
	animation-delay: 0.9s;
}

.heart dot:nth-of-type(10n) {
	animation-delay: 1.0s;
}

.heart dot:nth-of-type(11n) {
	animation-delay: 1.1s;
}

@keyframes animate {
	0% {
		filter: opacity(0);
		transform: translateY(-10em);
	}

	25%, 75% {
		filter: opacity(1);
		transform: translateY(0);
	}

	100% {
		filter: opacity(0);
		transform: translateY(10em);
	}
}