用 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 后，需将动画绑定到 <img> 元素，并控制播放行为。这里容易忽略的是容器的 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 加速，动画更流畅。尤其在移动端或低配设备上，差异明显。
立即学习“前端免费学习笔记（深入）”；
- 使用
left时，即使加了will-change: left，也无法完全规避重排开销 -
translateX是 CSS transform 的一部分，天然支持硬件加速，且不影响文档流 - 注意：若图片已用
position: absolute且依赖left/top布局，不要混用——要么全用transform，要么统一用定位属性
兼容性与常见卡顿点
现代浏览器对 transform + @keyframes 支持良好，但仍有几个实际卡点：
- 旧版 Safari（≤13.1）对
calc()在@keyframes中的支持不稳定，建议用百分比或预计算值代替 - 动画中若同时修改
opacity或filter，可能触发额外合成层，导致内存占用升高，尤其长列表里多个动图同时播 - 如果图片本身加载慢，动画会先跑完、图片才出现——应结合
img.onload或loading="lazy"+animation-delay协调时机
真正难的不是写出来，而是让动画在各种尺寸、网络和设备上都“不跳、不卡、不闪”。多测真机，少信 DevTools 里的模拟帧率。
