I’m attempting to create a transition animation, however I am unable to determine easy methods to delay the change, in that case it is the rounded-full until the top of the hover animation.
What I am attempting to realize is that the rounded-full will kick in AFTER the scale-110 animation, however as you possibly can see, the rounded-full is kicking in as quickly as I hover the button.
I respect any assist with reaching that.
https://play.tailwindcss.com/TqEiR65nDB
Code:
<div class="flex items-center justify-center h-screen">
<button class="transition duration-1000 ease-in-out bg-blue-600 hover:bg-red-600 hover:rounded-full remodel hover:-translate-y-1 hover:scale-110">
Hover me
</button>
</div>