<div class="square"></div>
<div class="square"></div>

.square {
	background: #e4002b;
	width: calc(50% - 1rem);
	max-width: 80vh;
	aspect-ratio: 1 / 1;
	animation: burst 1.5s cubic-bezier(0,.46,.26,.99) alternate-reverse infinite;
	display: inline-block;
}

.square:nth-child(2) {
	margin-left: 1rem;
	animation: scale 1.5s cubic-bezier(0,.46,.26,.99) alternate-reverse infinite, fade 1.5s linear alternate-reverse infinite;
}

@keyframes burst {
	from {
		opacity:0;
		transform: scale(0);
	}
}

@keyframes fade {
	from {
		opacity:0;
	}
}

@keyframes scale {
	from {
		transform: scale(0);
	}
}

body {
	margin: 1rem;
}

html {
	background: #fcfcfc;
}

* {
	box-sizing: border-box;
}