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