关键帧SCSS轮播转Tailwind后失效问题求助

问题描述 #

我有一个可正常运行的CSS轮播动画，将其中部分HTML结构转换为Tailwind语法后，图片完全消失，无法实现原轮播效果，求排查操作中的错误。

原HTML需转换部分 #

<div class="wrapframe">
  <div class="slideshow slideshow--hero"> <!-- 需转换的部分 -->
    <div class="mainslides"> <!-- 需转换的部分 -->
      <div class="slide slide1"></div> <!-- 需转换的部分 -->
      <div class="slide slide2"></div> <!-- 需转换的部分 -->
      <div class="slide slide3"></div> <!-- 需转换的部分 -->
    </div>
  </div>
  <div class="slideshow slideshow--contrast slideshow--contrast--before">
    <div class="secondslides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
  <div class="slideshow slideshow--contrast slideshow--contrast--after">
    <div class="thirdslides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
</div>

转换后的Tailwind版HTML #

<div class="relative h-screen overflow-hidden p-20">
  <div class="absolute top-1/2 left-0 z-[3] w-full h-[85%] -translate-y-1/2 -skew-[10deg] overflow-hidden shadow-[0_0_1rem_rgba(0,0,0,.25)]">
    <div class="absolute left-0 -top-2.5 w-screen h-screen">
      <div class="animate-SlidesSet1 bg-[url(https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2)]"></div>
      <div class="animate-SlidesSet2 bg-[url(https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2)]"></div>
      <div class="animate-SlidesSet3 bg-[url(https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2)]"></div>
    </div>
  </div>
  <div class="slideshow slideshow--contrast slideshow--contrast--before">
    <div class="secondslides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
  <div class="slideshow slideshow--contrast slideshow--contrast--after">
    <div class="thirdslides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
</div>

Tailwind配置中的关键帧定义 #

SlidesSet1: {
"0%": {
 opacity: "1",
 transform: "scale(1)"
},
"31%": {
opacity: "1",
transform: "scale(1)"
},
"34%": {
opacity: "0",
transform: "scale(1.05)"
},
"97%": {
opacity: "0",
transform: "scale(1.05)"
},
"100%": {
opacity: "1",
transform: "scale(1)"
  }
},
animation: {
    SlidesSet1: "20s firstSlidesSet -0.1s infinite",
},

错误分析与修复方案 #

1. 动画名称不匹配 #

配置中animation.SlidesSet1引用的动画名称是firstSlidesSet，但关键帧定义的是SlidesSet1，两者名称不一致导致动画无法触发。

修复：
将动画配置中的firstSlidesSet改为SlidesSet1：

animation: {
  SlidesSet1: "20s SlidesSet1 -0.1s infinite",
}

2. 缺少Slide元素基础样式 #

原CSS中.slide默认包含绝对定位、宽高100%、背景覆盖等样式，Tailwind转换时未添加这些类，导致背景图片无法填充容器，自然看不到图片。

修复：
给每个slide元素添加absolute inset-0 bg-cover bg-center类，确保背景图片占满容器：

<div class="animate-SlidesSet1 absolute inset-0 bg-cover bg-center bg-[url(...)]"></div>

3. 动画配置不完整 #

仅定义了SlidesSet1的关键帧和动画规则，SlidesSet2和SlidesSet3未在Tailwind配置中定义，导致后两张图片无动画效果，且初始状态可能为不可见。

修复：
在keyframes中添加SlidesSet2和SlidesSet3的关键帧，并在animation中配置对应规则：

module.exports = {
  theme: {
    extend: {
      keyframes: {
        SlidesSet1: {
          "0%": { opacity: "1", transform: "scale(1)" },
          "31%": { opacity: "1", transform: "scale(1)" },
          "34%": { opacity: "0", transform: "scale(1.05)" },
          "97%": { opacity: "0", transform: "scale(1.05)" },
          "100%": { opacity: "1", transform: "scale(1)" }
        },
        SlidesSet2: {
          "0%": { opacity: "0", transform: "scale(1.05)" },
          "31%": { opacity: "0", transform: "scale(1.05)" },
          "34%": { opacity: "1", transform: "scale(1)" },
          "64%": { opacity: "1", transform: "scale(1)" },
          "67%": { opacity: "0", transform: "scale(1.05)" },
          "100%": { opacity: "0", transform: "scale(1.05)" }
        },
        SlidesSet3: {
          "0%": { opacity: "0", transform: "scale(1.05)" },
          "64%": { opacity: "0", transform: "scale(1.05)" },
          "67%": { opacity: "1", transform: "scale(1)" },
          "97%": { opacity: "1", transform: "scale(1)" },
          "100%": { opacity: "0", transform: "scale(1.05)" }
        }
      },
      animation: {
        SlidesSet1: "20s SlidesSet1 -0.1s infinite",
        SlidesSet2: "20s SlidesSet2 -0.1s infinite",
        SlidesSet3: "20s SlidesSet3 -0.1s infinite"
      }
    }
  }
}

4. 容器层级与样式验证 #

确保转换后的外层容器（如relative h-screen overflow-hidden p-20）完全覆盖原.wrapframe的样式，避免布局偏移导致图片被隐藏。

内容的提问来源于stack exchange，提问作者user21288868