Css 背景重复图像以在顺风中设置动画

我正在尝试使用Tailwind CSS，目前我正在尝试设置背景图像的动画。我尝试了不同的方法，但还没有弄清楚如何从左到右在一个方向上设置背景图像的动画

以下是我迄今为止所做的工作

• 添加了自定义背景图像
• 添加了一个重复，以填充该区域

另外，我想做的是，像动画一样展示它，让它感觉像是在移动。我已经在普通的CSS中实现了它，但不能将它放在顺风中

<div class="p-6 bg-gray-500 flex flex-col items-center min-h-screen justify-center bg-hero-pattern bg-repeat animate-ltr-linear-infinite">
<div class="text-white">
    <h1 class="text-6xl">Some Text HERE</h1>
    <h1 class="text-2xl">Background Not Animating</h1>
</div>
</div>

  theme: {
    extend:{
      backgroundImage: theme => ({
        'hero-pattern': "url('img/bg.png')"
      }),
      animation:{
        'ltr-linear-infinite': 'normal 100s linear infinite'
      }
    }
  }

以下是在普通CSS中实现的动画视频：

以下是我到目前为止实施的背景的“顺风运动场”：

当前在Tailwind中实现的代码

<div class="p-6 bg-gray-500 flex flex-col items-center min-h-screen justify-center bg-hero-pattern bg-repeat animate-ltr-linear-infinite">
<div class="text-white">
    <h1 class="text-6xl">Some Text HERE</h1>
    <h1 class="text-2xl">Background Not Animating</h1>
</div>
</div>

  theme: {
    extend:{
      backgroundImage: theme => ({
        'hero-pattern': "url('img/bg.png')"
      }),
      animation:{
        'ltr-linear-infinite': 'normal 100s linear infinite'
      }
    }
  }

以下是我用于重复的图像：

---

我还必须在顺风配置中添加关键帧。让它工作

以下是工作流程

这是更新后的代码，供将来需要时参考

  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('https://i.ibb.co/Qn5BR8N/bg.png')",
      }),
      animation: {
        'ltr-linear-infinite': 'ltr-linear-infinite 100s linear infinite',
      },
      keyframes: {
        'ltr-linear-infinite': {
          'from': { 'background-position': '0 0' },
          'to': { 'background-position': '400% 0%' },
        },
      },
    }
  }

问题 我在你的代码中看不到动画。我只看到“定时功能”。 写这封信：

动画：{
“ltr线性无限”：“正常100s线性无限”
}

您告诉Tailwind他应该这样定义动画类：

.ltr线性无限{
动画：正常100秒线性无限；
}

它当然不能正常工作-没有正常的关键帧

---

解决方案 引用自：

要添加新动画

@关键帧

，请使用主题配置的

关键帧

部分：

//tailwind.config.js
module.exports={
主题：{
扩展：{
关键帧：{
摆动：{
“0%，100%：{transform:'rotate（-3deg）}，
“50%”：{transform:'rotate（3deg）}，
}
}
}
}
}

因此，在您的情况下，它将是这样的：

module.exports={
主题：{
扩展：{
//定义模式
背景图片：主题=>({
“英雄模式”：“url（'img/bg.png'）”
}),
//定义动画类
动画：{
“ltr线性无限”：“移动bg 10s线性无限”，
},
//定义关键帧
关键帧：{
“移动背景”：{
“0%”：{“背景位置”：“0%”，
“100%”：{“背景位置”：“256px 0”}
}
}
}
}
}

---

p.S.

100s

使背景移动

~2.5px/S

。也许它太慢了，所以我把它改成了

~25px/s

谢谢，就在我想出解决方案前一两分钟。但您的代码似乎更好一些，将使用您的代码。再次感谢。我也对它做了一些修改。