'Fade/transition tailwind class to something else over certain amount of time?

Is there a way to set bg-red-300 and fade/transition it to bg-transparent or different bg class over 2 seconds or do I need javascript for this? I want an element to highlight and then return to normal after 2 secs. Thank you!

csstailwind-csstailwind-in-js


Solution 1:[1]

You may create your own animation with config file

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: [],
}

Use it like

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

Demo

P.S. However you may probably need some Javascript to trigger animate-fade classlist toggling or something as animation will proceed no matter does block is in viewport or not.

Solution 2:[2]

You could utilize tailwind transition property

transition-opacity

<div class="h-8 w-8 bg-blue-600 transition-opacity ease-in duration-700 opacity-100 : hover:opacity-0"></div>

refer https://tailwindcss.com/docs/transition-property

Demo

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ihar Aliakseyenka
Solution 2 Shabeer Ali

Related Questions