Tailwind animation ease

user_3153039 0
Viewed 1262

I try to put a simple transition on an after pseudo element in Tailwind. The css is:

.button::after { transition: 0.5s all ease }

I tried:

class="after:transition after:ease after:duration-500"

But nothing. I see that after:ease doesn't work, but how do I go about this?

Thanks so much!

tailwind-css
2 Answers

You have added only ease as the class. But tailwind have no class named ease. So you have to update your class ease with one of the following classes:

  • ease-in
  • ease-out
  • ease-in-out
  • ease-linear

For more information please refer to Official Tailwind Docs

user_143593740

Define transition, duration and ease (-in,out, etc.) Take a look to this class:

 <div
  class="transition-opacity 
   duration-500 
   ease-out opacity-100 hover:opacity-0 
   bg-black text-white font-bold p-10 px-4 h-screen">
  Bye Bye
 </div>

working example https://play.tailwindcss.com/160JJfEXJe

user_148071110
Related