内容滚动进入视口时自动从下淡入，现代浏览器原生方案
← 返回 入场与交互动画 类特效列表条目 1
条目 2 —— 滚动时淡入
条目 3 —— 滚动时淡入
条目 4 —— 滚动时淡入
上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .scdemo{height:120px;overflow:auto;border:1px dashed #2d3748;padding:10px;border-radius:10px}
.fx .scdemo p{min-height:60px;padding:10px;background:#161b22;border:1px solid #2d3748;border-radius:8px;margin:6px 0;color:#9aa7b8;font-size:13px}
.fx .fadeup{animation:kfx-fadup linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@media (prefers-reduced-motion:reduce){.fx .fadeup{animation:none}}
@keyframes kfx-fadup{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}<div class="fx">
<div class="scdemo"><p>条目 1</p><p class="fadeup">条目 2 —— 滚动时淡入</p><p class="fadeup">条目 3 —— 滚动时淡入</p><p class="fadeup">条目 4 —— 滚动时淡入</p></div>
</div>