可行，但需手写@keyframes+flex重复结构；直接用animate-类会跳帧，因infinite重置导致硬切；无缝依赖双倍图片、精确位移与线性时长耦合。
纯 CSS 实现无缝循环轮播图在 Tailwind 中可行，但不能只靠 animate- 工具类；必须手动写 @keyframes + 用 flex + overflow-hidden + 图片重复结构，否则会跳帧、卡顿或露白边。
为什么不能直接用 animate-[slide] + infinite
Tailwind 的 animate- 类只是快捷绑定 animation CSS 属性，它不控制关键帧逻辑。直接写 @keyframes slide { to { transform: translateX(-100%) } } 并设 infinite，动画走到末尾会「重置回起点」，人眼能察觉瞬时跳变——这不是无缝，是硬切。
真正无缝依赖视觉欺骗：让容器宽度 = 单张图 × 2，动画位移距离 = 单张图宽度，动画时长 = 位移所需时间，且外层严格 overflow-hidden。
- 动画总时长（如
7s）必须和@keyframes中0%→100%的位移时长一致 -
duration-700这类类名只控制transition，对@keyframes无效，别混用 - 移动端 Safari 对
transform: translateX()的硬件加速不稳，建议加will-change: transform
必须的 HTML 结构与 Tailwind 类组合
结构核心是「原图序列 + 完全复制一份」，用 flex 横向排列，每张图加 flex-shrink-0 防压缩，外层 overflow-hidden 遮住溢出部分：
立即学习“前端免费学习笔记（深入）”；
<div class="relative overflow-hidden">
<div class="flex [&_img]:w-full [&_img]:flex-shrink-0">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<!-- 复制开始 -->
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
</div>-
[&_img]:w-full比逐个写class="w-full"更简洁，且确保所有img宽度撑满父容器 - 不要用
object-fit: cover在外层容器上，它会干扰 flex 布局计算；应在img上单独加object-cover - 若图片高度不一致，会导致 flex 行高塌陷，统一加
h-[400px]或用aspect-video约束
手写 @keyframes 的数值怎么算
假设轮播区域宽 100vw，共 3 张图，每张占满容器宽度，则整个 flex 内容宽度为 6 × 100vw = 600vw。动画需从 0vw 平滑移到 -300vw（即走完前 3 张），耗时 7 秒，对应关键帧：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-300vw); }
}然后在内层 div 上应用：
<div class="flex ... animate-slide" style="animation: slide 7s linear infinite;">
- 动画时长（
7s）必须和图片数量 × 单图停留时间一致；比如 3 张图，每张显 2.33s，就写7s - 别用
ease-in-out，它会让速度不均，导致「拖尾感」；linear才是匀速平滑的关键 - 如果改用
translateX(-100%)，百分比是相对于父容器，不是单图宽度，极易错位——务必用vw或具体像素值
移动端卡顿或首帧闪动怎么办
常见于 iOS Safari 和低端安卓机，本质是渲染管线未及时同步。除了加 will-change: transform，还需补两个细节：
- 给动画容器加
backface-visibility: hidden（可写成[-backface-visibility:hidden]） - 避免在动画中同时修改
opacity或filter，它们会触发重绘；如需淡入淡出，改用 JS 控制 class 切换 - 首次加载时可能看到复制项一闪而过，加
opacity-0+transition-opacity，JS 中等 DOM ready 后再移除 - 如果用
prefers-reduced-motion，记得加媒体查询停用动画：@media (prefers-reduced-motion: reduce) { .animate-slide { animation: none; } }
最易被忽略的是：动画时长和图片数量必须严格耦合，差 0.1 秒就会在循环点产生肉眼可见的顿挫——这不是样式问题，是数学问题。
