使用IntersectionObserver实现滚动触发动画，一键复制CSS+JS代码
零依赖·可离线使用🎭 动画效果
⚙️ 参数调节
👁️ 实时预览（向下滚动查看效果）
⬇️ 向下滚动查看动画效果
卡片 1
滚动到此处触发动画
卡片 2
每个元素独立触发
卡片 3
支持多种动画效果
卡片 4
可调节速度和延迟
卡片 5
纯CSS+JS，零依赖
📋 生成代码
📖 CSS滚动揭示动画生成器能做什么？
CSS滚动揭示动画生成器是一个在线工具，帮助开发者使用IntersectionObserver API创建滚动触发动画。无需引入第三方库，生成的代码轻量高效，可直接集成到任何项目中。
核心功能
- 8种动画：淡入、四方向滑入、缩放、旋转、翻转
- IntersectionObserver：使用原生API，性能优于scroll事件
- 参数可调：时长、延迟、距离、缓动、阈值全可控
- 零依赖：纯CSS+JS，无需引入任何库
使用教程
- 选择动画效果类型
- 调节动画参数（时长、延迟、距离等）
- 在预览区滚动查看效果
- 点击"复制代码"获取CSS+JS代码
- 在HTML元素上添加class="reveal"即可使用
应用场景
场景1：着陆页
让页面元素在滚动时依次出现，创造叙事节奏感。
场景2：产品展示
特性卡片滚动进入视口时动画展示，提升用户参与度。
场景3：长页面
为长文章或文档添加滚动动画，减少视觉疲劳。
📖 常见问题
什么是Scroll Reveal动画？
Scroll Reveal（滚动揭示）是一种网页动画效果，当元素滚动进入视口时触发动画，如淡入、滑入、缩放等。
IntersectionObserver是什么？
IntersectionObserver是浏览器原生API，用于异步检测元素与视口的交叉状态。相比scroll事件监听，它性能更好、代码更简洁。
滚动动画会影响SEO吗？
不会。搜索引擎爬虫可以正确渲染CSS动画和IntersectionObserver。但建议初始状态不要隐藏关键内容，使用opacity:0和transform代替。
如何优化滚动动画性能？
1) 只动画transform和opacity属性；2) 使用will-change提示浏览器；3) 设置合理的rootMargin；4) 使用threshold控制触发时机。
支持哪些动画效果？
支持淡入、从左/右/上/下滑入、缩放、旋转、翻转等8种基础效果，每种可调节方向、距离、速度和延迟。