在 Tailwind 中设置动画的背景重复图像答案

【问题标题】：Background repeat image to animate in Tailwind在 Tailwind 中设置动画的背景重复图像
【发布时间】：2021-04-03 08:15:28
【问题描述】：

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

这是我到目前为止所做的。

添加了自定义背景图片
添加了重复以填充该区域。

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

以下是用普通CSS实现的动画视频：https://youtu.be/Jx8fg2MdG3Y

以下是我目前实现的后台 Tailwind 游乐场：https://play.tailwindcss.com/jmoPHTdXAe

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>

以下是我目前在 Tailwind 中尝试过的配置。

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

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

https://i.ibb.co/Qn5BR8N/bg.png

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

问题

我在您的代码中看不到动画。我只看到“定时功能”。写这个：

animation: {
  'ltr-linear-infinite': 'normal 100s linear infinite'
}

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

.ltr-linear-infinite {
  animation: normal 100s linear infinite;
}

它当然不能正常工作——没有@keyframes normal。

解决办法

来自docs的引用：

要添加新动画 @keyframes，请使用主题配置的 keyframes 部分：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

所以，在你的情况下，它会是这样的：

module.exports = {
  theme: {
    extend: {
      // Define pattern
      backgroundImage: theme => ({
        'hero-pattern': "url('img/bg.png')"
      }),
      // Define animation class
      animation: {
        'ltr-linear-infinite': 'move-bg 10s linear infinite',
      },
      // Define keyframes
      keyframes: {
        'move-bg': {
          '0%':   { 'background-position': '0 0' },
          '100%': { 'background-position': '256px 0'}
        }
      }
    }
  }
}

附注100s 使背景移动~2.5px/s。可能是太慢了，所以我改成~25px/s。

【讨论】：

谢谢，在我想出解决方案之前只有一两分钟。但是您的代码似乎更好一些，将使用您的代码。再次感谢。我也对其进行了一些修改。 play.tailwindcss.com/d825A4Se3Z
这有助于在进度条上重新创建bootstrap's animated stripes，如progress-bar progress-bar-striped progress-bar-animated

【解决方案2】：

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

以下是工作EXAMPLE

这是更新后的代码，供以后需要时参考。


  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%' },
        },
      },
    }
  }

【讨论】：