リスト項目が下から順番にふわっと現れる入場アニメーション。animation-delayの時間差で「流れ」を作ります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
ポイントはanimation-fill-mode: both（ショートハンド内のboth）です。これがないとdelay中はアニメ開始前の状態（=表示済み）になり、「一瞬見えてから消えて現れる」チラつきが起きます。@keyframesはfromだけ書けばtoは現在のスタイルが使われるため、終了状態を二重管理せずに済みます。
項目数が可変の場合、nth-childの列挙の代わりにインラインstyleでanimation-delay: calc(var(--i) * 0.1s)を渡す設計がよく使われます。