物理弹簧交错流

列表元素入场使用交错动画（Stagger Delay），每个子项带微弱弹性向上滑入（Spring Cascade）。间隔太大像排队，太小像一坨——拖下面的滑杆找手感。

实时 Demo

交错间隔 90ms

新消息 · 设计评审3 分钟前 · "第三版的卡片间距再收紧一点"

未读

部署成功 · main → 生产12 分钟前 · 构建耗时 42s

成功

定时任务 · 数据同步完成1 小时前 · 共 1,284 条记录

完成

告警 · 接口 P99 升高2 小时前 · /api/orders 达到 820ms

待处理

文档更新 · API v2.3昨天 · 新增分页与游标参数

已读

滚动加载新数据时，对新节点从 0 开始计延迟即可实现"逐条冒出来"

效果拆解

两个独立参数：延迟（第 i 项 = i × step）和缓动。交错负责"节奏"，缓动负责"手感"，互不干扰。
弹性曲线：cubic-bezier(.22, 1.2, .36, 1)——y2=1.2 > 1 产生约 5% 的过冲回弹，正是"微弱弹性"的来源；想要更 Q 就把 1.2 提到 1.4，想稳就改 1.0。
位移要克制：26px 足够，超过 40px 会像"跳"。配合 scale(.98) 起点增加纵深感。
实现：每项 opacity:0 + 内联 animation-delay，关键帧统一；重播只需清掉动画强制重排后重设。
性能：只动 transform/opacity，N 项同屏没问题；超过 20 项建议配合 IntersectionObserver 只入场视口内的。

AI 提示词

列表元素入场使用交错动画：每个子项的 animation-delay 等于序号 × 间隔（间隔 80~120ms 可调），入场关键帧为 opacity 0→1、translateY(26px)→0 并叠加 scale(.98)→1 起点；缓动用 cubic-bezier(.22, 1.2, .36, 1)，其中 y 值大于 1 产生约 5% 的过冲形成微弱弹性回弹（Spring Cascade）；初始 opacity:0 防止闪现；只使用 transform 与 opacity，保证 GPU 合成；滚动加载新数据时对新节点从 0 重新计延迟。列表元素入场使用交错动画：每个子项的 animation-delay 等于序号 × 间隔（间隔 80~120ms 可调），入场关键帧为 opacity 0→1、translateY(26px)→0 并叠加 scale(.98)→1 起点；缓动用 cubic-bezier(.22, 1.2, .36, 1)，其中 y 值大于 1 产生约 5% 的过冲形成微弱弹性回弹（Spring Cascade）；初始 opacity:0 防止闪现；只使用 transform 与 opacity，保证 GPU 合成；滚动加载新数据时对新节点从 0 重新计延迟。

想要"波浪感"更强：把位移提到 34px，间隔提到 130ms，过冲提到 1.35。
提示词里参数都是本 Demo 实测值，可直接复现同款手感。