动画 · 入场与退场 · 09
淡入上移
淡入上移 = 元素进入视口时从透明、下移 24px 渐显归位，让内容像「抵达」而非突然弹出。
直达修改 Prompt →
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
淡入上移是什么？
淡入上移是最常用的入场。元素从透明、下移 24px 开始，滚入视口时归位，让内容像「抵达」而不是弹出。位移小、约 0.5s，否则拖沓。用 Intersection Observer 触发而非加载即播，否则屏外元素白白动画。
动画 标本
- 触发
- inview
- 技术
- css
- 时长
- 2.2s
- 缓动
cubic-bezier(0.16, 1, 0.3, 1)- 性能
- transform, opacity
什么时候用
- Headings, cards, or sections as they scroll into view
- Any first-paint content that should feel composed
什么时候别用
- Above the fold on load — let it just appear
- Long lists where every row fading draws attention from content
Trigger on scroll-in, not load — animating off-screen elements wastes the effect and can hurt perceived speed.
Fade an element in from opacity 0 / translateY(24px) to rest over 0.5s, transform and opacity only, triggered on scroll into view.