纯CSS实现图片左滑入需用@keyframes定义translateX(-100%)到translateX(0)动画，配合forwards保持终态、overflow:hidden防探头、will-change:transform提升性能，并注意loading="lazy"可能导致动画时图片未加载。
用 CSS animation 实现图片从左滑入，不依赖 JS
纯 CSS 就能搞定，关键不是加个 transition 就完事——得控制初始位置和动画轨迹。图片默认要「藏在视口左边」，再用 @keyframes 把它拉回来。
常见错误是直接对 opacity 或 visibility 动画，结果只有淡入、没有滑动；或者忘了设 overflow: hidden 在父容器，导致滑入前看到图片“探头”。
- 给图片设
position: relative（或absolute），然后初始left: -100%（不是-100px，要相对自身宽度） - 动画终点设为
left: 0，配合transform: translateX(0)更流畅（推荐后者，避免触发重排） - 父容器记得加
overflow: hidden，否则滑入前可能漏出
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
img.slide-left {
animation: slideInFromLeft 0.6s ease-out forwards;
}
img 标签加 loading="lazy" 会影响滑入动画吗？
会，但只在首次进入视口时明显：浏览器延迟加载图片，animation 可能已执行完毕，而图片还是空白或占位符。这不是动画失效，而是资源没到位。
- 如果图重要、必须一进页面就动，去掉
loading="lazy"，或改用loading="eager" - 更稳妥的做法是监听
img的load事件，等加载完成再触发动画类（需少量 JS） - 若坚持纯 CSS，可先用一张极小的 base64 占位图作为
src，再通过data-src存真实地址，靠 JS 切换——但这已超出纯 CSS 范畴
移动端滑入卡顿？检查 will-change 和硬件加速
安卓低端机或 iOS Safari 下，translateX 动画偶尔掉帧，本质是浏览器没启用 GPU 加速。别乱加 transform: translateZ(0)，现代写法是明确告诉浏览器这个元素要动：
立即学习“前端免费学习笔记（深入）”；
- 在动画元素上加
will-change: transform（仅对频繁动画的元素用，别全局加） - 确保动画属性只涉及
transform和opacity，避免触发布局（left/top）或绘制（background-color） - iOS Safari 对
forwards有时有渲染残留，可在动画结束加transform: none清理（但需测试是否影响后续交互）
多个图片依次滑入？用 animation-delay 配合 :nth-child
不用 JS 写循环，CSS 就能实现 stagger 效果。关键是把延迟值和序号挂钩，比如第 2 张比第 1 张晚 0.2s，第 3 张晚 0.4s……
- 给所有图片加统一类如
slide-item，再用.slide-item:nth-child(1) { animation-delay: 0s; } - 手动写到第 5–6 个基本够用；更多则建议用 JS 动态加 style，否则 CSS 太冗长
- 注意：如果图片是响应式网格（如 flex wrap），
:nth-child按 DOM 顺序而非视觉行顺序，可能错位——此时需 JS 控制更可靠
真正麻烦的不是怎么动起来，而是动完之后的状态要不要保持、会不会被后续 CSS 覆盖、以及图片尺寸未定导致的布局抖动——这些细节比动画本身更容易让效果翻车。
