图片左滑入场需用@keyframes定义translateX(-100%)到translateX(0)，绑定animation并加forwards，确保初始位置在视口左外侧且样式权重足够。
用 @keyframes + transform: translateX() 实现图片左滑入场
直接给图片加 animation 并配合 @keyframes 定义从左外侧滑入的位移即可。关键不是“动起来”，而是让初始位置在视口左侧，再平滑移到最终位置。
- 图片默认要设
position: relative或absolute，否则translateX()可能不按预期触发重排 -
@keyframes中起点设为translateX(-100%)（相对于自身宽度），终点为translateX(0) - 动画需绑定在图片元素上，不能只写
@keyframes而忘记调用animation属性 - 如果图片是响应式（比如
max-width: 100%），-100%指的是其当前计算宽度，不是父容器宽度
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
img.slide-in {
animation: slideInFromLeft 0.6s ease-out forwards;
}
为什么图片没动？常见 3 个卡点
动画写了但完全没效果，大概率掉进这几个坑里：
- 没加
forwards—— 动画播完立刻跳回初始状态，看起来像“闪一下”就没了 - 图片本身没有显式宽高，或被父容器
overflow: hidden截断，导致-100%位移不可见 - CSS 选择器权重不够，被其他样式（比如内联
style或更高优先级规则）覆盖了animation
translateX() 用百分比还是 px？
推荐优先用 %，尤其当图片尺寸不固定时。它基于元素自身宽度计算，适配性强；而写死 px 值（如 translateX(-200px)）在不同尺寸图片或响应式场景下容易偏移不足或过度。
- 若需更精细控制（比如统一从屏幕左边缘开始），可用
vw单位：translateX(-100vw) - 避免混用单位：不要在一个
transform里同时写translateX(50%)和translateY(20px)，虽然合法，但可读性和维护性差 - 注意：
translateX(-100%)≠ “移到视口最左边”，它只是向左移动一个自身宽度的距离
想等页面加载完再触发动画？别靠 window.onload
现代做法是用 CSS 的 animation-delay 配合 JS 判断加载状态，而不是手动监听 JS 事件再加 class。更稳的方式是：
立即学习“前端免费学习笔记（深入）”；
- 图片加
loading="eager"（防止懒加载干扰时机） - 用
img:not([src=""])或img.complete配合 JS 添加类，但更简单的是直接用animation-delay: 0.1s微调起始节奏 - 真要等全部资源就绪，可在
DOMContentLoaded后给加个loaded类，然后写body.loaded img.slide-in规则
overflow、或用了 object-fit 的时候，translateX(-100%) 的参照系会悄悄变化。 
