<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;
}
View Compiled
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"
});
This Pen doesn't use any external CSS resources.