顶部进度条 + 卡片入场,全部由滚动条驱动——0 行 JS
当前浏览器不支持 animation-timeline,页面退回静态(这就是降级)
顶部进度条的时间轴是"整页滚了多少"。往回滚,它也回去——scrub 的意思就是动画进度可倒放。
这张卡的时间轴是"我自己在视口中的位置"。animation-range: entry 0% cover 45% 决定映射区间。
keyframes 一律 linear:缓动感来自你的手速,预设 easing 会跟它打架。
整套包在 @supports 和 prefers-reduced-motion 里,不支持 = 静态排版,无伤。
demo 的配色排版是占位 —— 抄机制,不抄样式(库规范铁律 6)