滚动渐入动画
滚动渐入：内容滚进视口时从下往上淡入。纯 CSS 新特性 @keyframes 配合 animation-timeline: view() 可以零 JS 实现（Chrome 115+ 支持）；通用做法仍是 JS IntersectionObserver 加 class（见 JS 特效教程）。
本节演示纯 CSS 现代写法与经典兼容写法的思路差异；滚动驱动动画是 2024 年后最值得关注的新 CSS 能力。
- animation-timeline: view() 让动画随滚动触发（较新浏览器）
- 兼容做法：JS IntersectionObserver 观察元素加 .in 类
- 配合 prefers-reduced-motion 照顾敏感用户
HTML
<style> /* 新浏览器：滚动进入视口时自动从下淡入 */ .fade-up { animation: fadeUp linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .scroll-demo { height: 90px; overflow: auto; border: 1px dashed #ccc; padding: 10px; } .scroll-demo p { min-height: 60px; padding: 10px; background: #f6f8fa; border-radius: 8px; margin: 6px 0; } </style> <div class="scroll-demo"> <p>条目 1</p> <p class="fade-up">条目 2 —— 滚动时淡入</p> <p class="fade-up">条目 3 —— 滚动时淡入</p> <p class="fade-up">条目 4 —— 滚动时淡入</p> </div> <p style="color:#888;font-size:13px">在这个小框里上下滚动试试（Chrome 115+ 生效）</p>
本节要点滚动渐入新方案：animation-timeline: view()；通用方案仍是 IntersectionObserver 加类。
