Different timings for animating to different states
I have a button, when I hover over it, it changes color over some amount of time, when I click/activate it it changes to a different color and I want that change to happen over a different amount of time than the hover change. How can I do that?
className:
"ease-in-out duration-500 hover:bg-red-800 ease-in-out duration-100 active:bg-red-900 outline-none text-white bg-red-600 font-bold text-lg border-4 border-black rounded-full bg-contain m-3 p-1"
I'm aware putting 2 durations means that one simply overrides the other(and that 2 ease-in-outs is also redundant), I have them both here anyways to provide a better idea of what I'm hoping for1 Reply
wait... okay I might be really dumb for not thinking of this sooner
from a quick glance just prefixing the appropriate variant onto
ease-in-out and duration seems to do the trick hover:ease-in-out+ hover:duration-500 & active:ease-in-out + active:duration-100