css - 在一定时间内淡入/过渡顺风类到其他东西？

Question

有没有办法在 2 秒内设置bg-red-300和淡化/过渡到bg-transparent或不同的 bg 类，或者我需要 javascript 吗？我想要一个元素突出显示，然后在 2 秒后恢复正常。谢谢！

Answer 1

您可以使用配置文件创建自己的动画

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      
      // that is animation class
      animation: {
        fade: 'fadeOut 5s ease-in-out',
      },

      // that is actual animation
      keyframes: theme => ({
        fadeOut: {
          '0%': { backgroundColor: theme('colors.red.300') },
          '100%': { backgroundColor: theme('colors.transparent') },
        },
      }),
    },
  },
  variants: {},
  plugins: [],
}

像这样使用它

<div class="w-40 h-40 animate-fade"></div>

演示

PS 但是，您可能需要一些 Javascript 来触发animate-fade类列表切换，或者无论块是否在视口中，动画都会继续进行。