<di class="demo">
	<div class="container container1">
		<button class="run">Run animation</button>
		<ul>
			<li class="box box1">
				No staggering
			</li>
			<li class="box box2">
				Big transforms
			</li>
			<li class="box box3">
				Long duration
			</li>
			<li class="box box4">
				Standard easing
			</li>
		</ul>
	</div>

	<div class="container container2">
		<button class="run">Run animation</button>
		<ul> 
			<li class="box box1">
				Staggered
			</li>
			<li class="box box2">
				Subtle transforms
			</li>
			<li class="box box3">
				Short duration
			</li>
			<li class="box box4">
				Custom easing
			</li>
		</ul>
	</div>
</div>

@import url(https://fonts.bunny.net/css?family=alata:400);

body {
	margin: 0;
	padding: 4vw;
	font-family: 'Alata', sans-serif;
}

.demo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4vw;
}

.container {
	width: 100%;
	max-width: 30rem;
	margin: 0 auto;
	display: grid;
	grid-auto-columns: 100%;
	gap: 1rem;
}

.container ul {
	display: inherit;
	gap: inherit;
	width: 100%;
	padding: 0;
}

.container ul li::marker {
	content: '';
}

.run {
	padding: 0.5rem;
	font-size: 1rem;
	font: inherit;
}

.box {
	text-align: left;
	padding: 1rem;
	background: skyblue;
	animation-name: fade_in;
	opacity: 0;
}

.container1 .box {
	background: orangered;
	color: white;
	animation: fade_in_1 0.8s ease-out forwards;
}

@keyframes fade_in_1 {
	from {
		opacity: 0;
		transform: translateY(5rem) scale(0);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.container2 .box {
	will-change: opacity transform;
	animation: fade_in_2 0.3s cubic-bezier(.14,.18,.16,1.02) forwards;
}

.container2 .box:nth-of-type(2) {
	animation-delay: 0.08s;
}

.container2 .box:nth-of-type(3) {
	animation-delay: 0.16s;
}

.container2 .box:nth-of-type(4) {
	animation-delay: 0.24s;
}

@keyframes fade_in_2 {
	from {
		opacity: 0.2;
		transform: translateY(1rem) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

const runBtns = document.querySelectorAll('.run')

runBtns.forEach(btn => {
	btn.addEventListener('click', (e) => {
		const boxes = e.target.parentElement.querySelectorAll('.box')
		boxes.forEach(box => {
			const animation = box.style.animation
			box.style.animation = 'none'
			setTimeout(() => {
				box.style.animation = animation
			}, 200)
		})
	})
})