纯 CSS 自动播放轮播图需慎用 animation + @keyframes，因其易卡顿跳帧，尤其在移动端；应采用 flex + overflow-hidden + 图片重复实现无缝衔接，并严格匹配动画时长、位移距离与图片数量。
为什么用纯 CSS 实现自动播放轮播图要慎用 animation + @keyframes
直接写 @keyframes 控制 transform: translateX() 看似简单，但容易卡顿、跳帧，尤其在移动端或低性能设备上。Tailwind 本身不提供轮播逻辑，它只负责原子类生成，真正驱动轮播的是 CSS 动画时序和 DOM 结构设计。关键不是“能不能”，而是“怎么让动画不重置、不抖动、不卡在最后一帧”。
必须用 flex + overflow-hidden + 重复项实现无缝衔接
无限轮播的本质是视觉欺骗：把原列表复制一份拼在后面，动画走到末尾时瞬间跳回起点但人眼不可见。Tailwind 中必须这样组织结构：
<div class="relative overflow-hidden">
<div class="flex transition-transform duration-700 ease-linear">
<!-- 原始 3 张图 -->
<img src="1.jpg" class="w-full flex-shrink-0">
<img src="2.jpg" class="w-full flex-shrink-0">
<img src="3.jpg" class="w-full flex-shrink-0">
<!-- 复制一份 -->
<img src="1.jpg" class="w-full flex-shrink-0">
<img src="2.jpg" class="w-full flex-shrink-0">
<img src="3.jpg" class="w-full flex-shrink-0">
</div>
</div>-
flex-shrink-0防止图片被压缩，否则宽度不准，动画会偏移 -
duration-700是动画时长，必须与@keyframes的总时长一致（比如 7s），否则跳帧 - 外层
overflow-hidden是关键，否则复制项会露出来
用 @keyframes 写平滑位移，不能靠 infinite 简单循环
Tailwind 不生成自定义动画，得自己写 @layer utilities 或直接在 <style> 里加。下面这段必须手写，且数值要严格匹配图片数量和容器宽度：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-300%); } /* 3 张图 → -300%，4 张就是 -400% */
}然后绑定到内层 flex 容器：
立即学习“前端免费学习笔记（深入）”；
<div class="flex animate-slide">...</div>
-
animate-slide要配animation-duration和animation-timing-function，推荐linear，避免ease导致速度不均 - 动画总时长 = 单张停留时间 × 图片数（比如每张 3s，3 张图 → 9s）
- 不能用
animation-iteration-count: infinite就完事——必须配合位移终点精准落在复制项起点，否则会闪一下
移动端 Safari 上 transform 动画卡顿的临时解法
iOS 15+ 的 Safari 对 transform: translateX() 的硬件加速支持不稳定，尤其当父容器有 overflow-hidden 时。实测有效的缓解方式：
- 给内层
flex容器加will-change: transform（Tailwind 没对应类，得手写） - 避免在动画中同时修改
opacity或filter，它们会触发重绘 - 如果轮播图高度不固定，
flex-shrink-0可能失效，改用min-w-full+flex-none - 真遇到卡顿，宁可降级为 JS 控制（用
requestAnimationFrame+translate3d），也别硬撑纯 CSS
纯 CSS 无限轮播不是“写完就跑”，而是反复调 width、timing、repeat 数值，直到在 iPhone SE 和 Android 旧机上都不掉帧。最常被忽略的，其实是图片加载完成前的空白占位和宽高比锁定——这跟动画无关，但一出问题，整个轮播就错位。
