Wednesday, March 15, 2023
HomeCSScss - delay change after the transition

css – delay change after the transition


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>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments