图片滑入动画有三种实现方式：一是纯CSS @keyframes + animation，简洁兼容；二是Intersection Observer API触发，滚动至视口才执行；三是现代scroll-driven animation，无需JS但支持有限。
图片在页面加载时向下滑入，本质是让图片初始处于视口上方（不可见），再通过 CSS 动画或 JavaScript 控制其向下移动并进入可视区域。实现方式轻量、兼容性好，无需第三方库。
用 CSS @keyframes + animation 实现
这是最常用且简洁的方法：定义一个从上往下的位移动画，绑定到图片元素上。
- 给图片添加类名，例如
<img src="a.jpg" class="slide-in-down"> - 在 CSS 中定义动画关键帧：
@keyframes slideInDown { from { transform: translateY(-50px); /* 起始位置：向上偏移50px */ opacity: 0; } to { transform: translateY(0); /* 结束位置：回到原始位置 */ opacity: 1; } } - 应用动画样式：
.slide-in-down { animation: slideInDown 0.6s ease-out forwards; } -
注意：
forwards确保动画结束后保持最终状态（否则图片会“弹回”）；ease-out让滑入更自然。
配合 scroll-trigger 实现“滚动到才触发”
如果希望图片只在用户滚动到它附近时才滑入（更节制、更专业），可用 Intersection Observer API：
- HTML 中为图片加标识：
<img src="b.jpg" class="trigger-slide"> - CSS 保持初始隐藏+过渡：
.trigger-slide { opacity: 0; transform: translateY(30px); transition: opacity 0.5s, transform 0.5s; } - JS 监听进入视口：
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); <p>document.querySelectorAll('.trigger-slide').forEach(img => { observer.observe(img); }); - 再加一条 CSS 规则：
.trigger-slide.visible { opacity: 1; transform: translateY(0); }
用纯 CSS 的 scroll-driven animation（现代方案）
Chrome 115+、Safari 17.4+ 支持基于滚动进度的动画，可实现“随滚动渐进滑入”效果：
立即学习“前端免费学习笔记（深入）”；
- 定义动画：
@keyframes slideDownScroll { 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } - 绑定滚动时间轴：
.scroll-slide { animation: slideDownScroll 1s linear; animation-timeline: view(); /* 滚动触发动画 */ animation-range: entry 20% exit 40%; /* 进入视口20%时开始，离开前40%结束 */ } - 该方案无需 JS，但目前浏览器支持有限，建议作为增强而非主方案。
推荐优先使用第一种纯 CSS 方案——简单可靠，所有现代浏览器都支持。如需更高交互精度（比如懒加载+动画结合），再叠加 Intersection Observer。
