<div class="main">
	<h1>Shopping List</h1>
	<ul class="list">
		<li>Milk</li>
		<li>Eggs</li>
		<li>Bacon</li>
		<li>Lettuce</li>
		<li>A book on CSS</li>
		<li>New fridge for kitchen</li>
		<li>Don't forget to get a shopping cart this time</li>
	</ul>
</div>

.doc {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #222;
	color: white;
	
	letter-spacing: 1px;
	line-height: 1.5;
}

anime({
	targets: ".list li",
	duration: 500,
	delay: anime.stagger(100, { start: 700, from: "last" }),
	easing: "easeInOutSine",
	opacity: [1, 0],
	translateX: [0, "-1rem"],
	loop: true,
	direction: "alternate"
});