如何利用Tailwind CSS实现一个支持自动播放的CSS无限轮播图？-css教程-PHP中文网

纯 css 自动播放轮播图需慎用 animation + @keyframes，因其易卡顿跳帧，尤其在移动端；应采用 flex + overflow-hidden + 图片重复实现无缝衔接，并严格匹配动画时长、位移距离与图片数量。

如何利用tailwind css实现一个支持自动播放的css无限轮播图？

为什么用纯 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 张图 -->
    @@##@@
    @@##@@
    @@##@@
    <!-- 复制一份 -->
    @@##@@
    @@##@@
    @@##@@
  </div>
</div>

flex-shrink-0 防止图片被压缩，否则宽度不准，动画会偏移
duration-700 是动画时长，必须与 @keyframes 的总时长一致（比如 7s），否则跳帧
外层 overflow-hidden 是关键，否则复制项会露出来

用 `@keyframes` 写平滑位移，不能靠 `infinite` 简单循环

Tailwind 不生成自定义动画，得自己写 @layer utilities 或直接在 <style></style> 里加。下面这段必须手写，且数值要严格匹配图片数量和容器宽度：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@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 就完事——必须配合位移终点精准落在复制项起点，否则会闪一下