Staggered list
Items enter one after another using a per-item delay set from a CSS variable.
CSSBeginner
<ul>
<li style="--i:0">Design</li>
<li style="--i:1">Prototype</li>
<li style="--i:2">Build</li>
<li style="--i:3">Test</li>
<li style="--i:4">Ship</li>
</ul>ul{list-style:none;margin:0;padding:0;width:min(340px,88vw);display:grid;gap:10px}
li{padding:14px 18px;border-radius:10px;background:#2a1513;border:1px solid #4a2e2a;
animation:in .6s cubic-bezier(.2,.8,.2,1) both;
animation-delay:calc(var(--i) * 90ms)}
@keyframes in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){li{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Staggered list</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
ul{list-style:none;margin:0;padding:0;width:min(340px,88vw);display:grid;gap:10px}
li{padding:14px 18px;border-radius:10px;background:#2a1513;border:1px solid #4a2e2a;
animation:in .6s cubic-bezier(.2,.8,.2,1) both;
animation-delay:calc(var(--i) * 90ms)}
@keyframes in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){li{animation:none}}
</style></head>
<body>
<ul>
<li style="--i:0">Design</li>
<li style="--i:1">Prototype</li>
<li style="--i:2">Build</li>
<li style="--i:3">Test</li>
<li style="--i:4">Ship</li>
</ul>
</body></html>Good for
Menus, feature lists, card grids and any group that should read as a sequence.
Watch out for
Cap the total time. Ten items at 80ms is 0.8s; fifty items at 80ms is four seconds of waiting.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.