<di class="demo">
	<div class="container container1">
		<ul>
			<li class="box box1">
				Big and slow
			</li>
		</ul>
	</div>

	<div class="container container2">
		<ul> 
			<li class="box box1">
				Quick and subtle
			</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: 2rem;
	background: skyblue;
	animation-name: fade_in;
	opacity: 0;
}

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

@keyframes fade_in_1 {
	0%, 10% {
		opacity: 0;
		transform: translateY(8rem) scale(0);
	}
	30%, 100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

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

@keyframes fade_in_2 {
	0%, 14% {
		opacity: 0;
		transform: translateY(1rem) scale(0.95);
	}
	15% {
		opacity: 0.25;
	}
	30%, 100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}