Appearance
缩小入场滚动
元素初始状态被放大到 1.5 倍，滚动进入视口时缩小到正常尺寸并逐渐变得清晰，产生"聚焦"般的视觉效果。
实时预览
代码
html
<style>
.zoom-out-target {
opacity: 0;
transform: scale(1.5);
transition:
opacity 0.7s ease-out,
transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zoom-out-target.visible {
opacity: 1;
transform: scale(1);
}
</style>
<div class="zoom-out-target">Zoom Out</div>缩小入场滚动滚动触发效果——元素在进入浏览器视口时触发 CSS transition 动画，从隐藏状态过渡到可见状态。配合 Intersection Observer API 实现视口检测，动画由 CSS 驱动，性能优异。
快速使用
- 复制 CSS 的初始状态和过渡样式到你的样式文件中
- 给需要滚动触发动画的元素添加初始类和
.scroll-target样式 - 使用 Intersection Observer（或本站提供的 JS）在元素进入视口时添加
.visible类 - 调整
transition的持续时间和缓动函数以匹配你的页面节奏
使用场景
- 首屏英雄区：页面加载后元素渐次出现，营造叙事节奏
- 产品特性展示：每滚动到一个特性区块，触发不同的入场动画
- 视差滚动：多层背景以不同速度滚动，营造深度感
- 长篇文章/落地页：滚动进度条给用户阅读进度的心理预期
常见问题
Q: 滚动动画需要 JavaScript 吗？ A: 本站滚动动画的演示版用少量 JS（Intersection Observer）检测元素进入视口。纯 CSS 方案可用 @scroll-timeline（Chrome 实验性支持），但生产环境建议用 Intersection Observer + CSS transition 组合。
Q: 如何控制滚动动画只播放一次？ A: Intersection Observer 中设置 once: true 选项，元素进入视口后移除 observer。或者添加 class 后就永久保留，利用 CSS transition 的 forwards 填充模式。
Q: 移动端滚动动画卡顿怎么办？ A: 确保动画属性只用 transform 和 opacity；降低动画元素的复杂度（减少阴影、模糊等重效果）；用 will-change: transform 提前提升合成层。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持（Intersection Observer + CSS transition） |
| Firefox | ✅ 完全支持 |
| Safari | ✅ 完全支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ❌ Intersection Observer 不支持，需 polyfill |
使用说明
| 属性 | 说明 |
|---|---|
scale(1.5) | 初始放大比例，1.2~2.0 之间效果较好 |
scale(1) | 最终正常尺寸 |
cubic-bezier(0.34, 1.56, 0.64, 1) | 带轻微回弹的弹性缓动曲线 |
opacity | 配合缩放从透明到不透明 |
transition-duration | 控制动画时长，建议 0.5~1s |
提示： 缓动曲线中第二个值 >1 会产生过冲回弹效果，改用 ease-out 可得到更平滑的动画。也可搭配 blur 滤镜增强聚焦感。