如何使用 TailwindCSS 淡入淡出文本背景颜色而不触发悬停或其他状态更改？

Question

当有条件地出现新文本时，我想用临时的琥珀色背景来引起注意，该背景在出现后 300 毫秒变为透明（类似于 Stack Overflow 的做法）。

有条件地出现文本时的屏幕截图：

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

这就是 300 毫秒后我想要的（尽管文本未更改）：

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

谢谢你的帮助。

Answer 1

这有效！

注意：我将背景动画放在标签中<span>，嵌​​套在<p>标签中，因此背景不会拉伸到整个容器宽度。可能有一种不那么黑客的方法可以做到这一点，但是......

页面上的代码（使用TailwindCSS）：

<p class="mb-2 text-slate-600">
      <span class="animate-fade rounded-lg text-sm font-normal">Text goes here</span>
        </p>

Tailwind.config.js 上的代码：

theme: {
    extend: {
      animation: {
        "fade": "fadeOut .9s ease-in-out",
      },

      // that is actual animation
      keyframes: (theme) => ({
        fadeOut: {
          "0%": { backgroundColor: theme("colors.amber.300") },
          "100%": { backgroundColor: theme("colors.transparent") },
        },
      }),

这不是我的工作。答案是从@IharAliakseyenka发布的/sf/answers/4781605671/盗取的，我是由Twitter用户@sandeshkumard引导到的