用 translateX 实现从左到右位移动画需设 from 为 translateX(-100%)、to 为 translateX(100%)等，配合 display: block、overflow: hidden 及完整 animation 属性，避免 left 引发重排，确保 GPU 加速与跨设备流畅性。
用 @keyframes 定义从左到右的位移动画
核心是让图片的 transform: translateX() 值从负值（完全在视口外左侧）过渡到正值（完全移出右侧），中间经过 0（居中显示）。注意：起始位置不能设为 translateX(0)，否则动画开始时图片已在视口内，看不到“入场”效果。
常见错误是直接写 from { transform: translateX(0); } —— 这会让动画从当前自然位置开始，失去“从左滑入”的意图。
- 推荐起始值：
translateX(-100%)（图片自身宽度的 -100%），确保完全隐藏在左侧边界外 - 结束值根据需求选：
translateX(100%)（移出右侧一屏）、translateX(calc(100vw + 100%))（彻底移出视口）或固定像素如translateX(800px) - 必须配合
transform: translateX(...)使用，不能只改left或margin-left，否则会触发重排，影响性能
给图片元素添加 animation 并设置关键属性
定义好 @keyframes 后，需将动画绑定到 元素，并控制播放行为。这里容易忽略的是容器的 overflow 和图片的 display 模式。
- 给图片加
display: block，避免默认inline导致底部留白干扰位移基准线 - 父容器建议设
overflow: hidden，防止图片移出时露出边缘 - 动画属性推荐写全：
animation: slideRight 3s ease-in-out infinite，其中ease-in-out比linear更自然 - 如果只要播一次，去掉
infinite；需要暂停/交互控制，可后续用 JS 操作animation-play-state
为什么用 translateX 而不是 left？
left 触发 layout（重排），translateX 只触发 composite（合成），浏览器能用 GPU 加速，动画更流畅。尤其在移动端或低配设备上，差异明显。
