用 CSS animation 和 transform: translateX() 可纯 CSS 实现图片轮播：HTML 扁平结构+flex 横排，父容器 overflow: hidden；@keyframes 控制 translateX 分段位移（如 4 图设 0%/-100%/-200%/-300%/0%），配合 steps() 或精确时间点实现停顿滑动效果。
用 CSS animation 和 transform: translateX() 实现图片轮播，核心是让一组图片在水平方向上依次位移，形成循环滑动效果。不需要 JS 也能完成，但需注意结构布局和关键帧控制逻辑。
HTML 结构要扁平且可循环
把所有图片放在一个容器内，用 display: flex 横向排列，确保总宽度足够容纳全部图片（避免换行）：
<div class="carousel"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> <img src="4.jpg" alt=""> </div>
注意：所有图片宽高需一致，或用 flex-shrink: 0 防止压缩；父容器设 overflow: hidden 裁剪超出部分。
用 translateX + animation 实现自动位移
动画本质是让整个图片组从左往右（或右往左）匀速移动，每张图占据 100% 容器宽度，位移单位为 100%。假设 4 张图，完整一轮需移动 -300%（即前三张图的宽度），最后回到起点形成循环：
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes定义从translateX(0)到translateX(-300%)的线性运动 - 动画时长按需设定（如 8s），并用
infinite循环 - 关键点：最后一帧必须回到
translateX(0)，否则会跳变；可用steps(4)或分段 keyframes 控制停顿
示例动画（4 图无缝循环）：
@keyframes slide {
0% { transform: translateX(0); }
25% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
.carousel {
display: flex;
overflow: hidden;
animation: slide 8s ease-in-out infinite;
}
让每张图停留一段时间再切换
如果希望每张图静止展示 2 秒、滑动 0.5 秒，就不用 ease-in-out，改用 steps(4) 或手动拆分关键帧时间点：
- 总时长设为
10s（4 图 × 2s 展示 + 4 次过渡 × 0.5s = 10s） - 在
0%, 20%, 40%, 60%分别对应四张图起始位置，用transform: translateX(-N%) - 过渡只发生在 5%、25%、45%、65% 等短区间，其余时间保持静止
这样就能模拟“停→滑→停→滑”的真实轮播节奏。
兼容性和微调建议
移动端要注意开启硬件加速，加 transform: translateZ(0) 或 will-change: transform 提升流畅度；若图片多，可复制首尾图实现视觉无缝（即 1-2-3-4-1），但 CSS 动画中更推荐用 keyframes 精确控制位移值，避免 DOM 扩展。
