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!
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>
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.