背景重复图像以在 Tailwind 中制作动画

Question

我正在尝试使用 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

Answer 1

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

以下是工作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%' },
        },
      },
    }
  }

Answer 2

问题

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

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

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

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

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

解决方案

引用自docs：

To add new animation @keyframes, use the keyframes section of your theme configuration:

// 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'}
        }
      }
    }
  }
}

P.S。 100s 使背景移动~2.5px/s。可能是太慢了，改成~25px/s.

背景重复图像以在 Tailwind 中制作动画

Background repeat image to animate in Tailwind

css

tailwind-css

问题

解决方案