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

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