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