tailwind-css

How to delay only certain animations of the element in tailwind css?

I'm an amateur in CSS and new to TailwindCSS, so I'm not sure where to start to solve this issue.

I have a <p> element, right now it appears on hover with 300ms delay, but I want it to disappear without delay at all. How can I implement this?

<p className={`opacity-0 group-hover:opacity-100 delay-300`}>
  Lorem ipsum
</p>

‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

Solution

  • To ensure there's no delay when the element disappears, set the delay to 0 by default. To have a delay only when the element appears, specify the delay using the group-hover: variant, e.g., delay-300.

    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="group">
  Try Here (mouse on: 800ms delay; mouse out: 0ms delay)
  
  <p class="
    opacity-0 transition-opacity duration-300 delay-0
    group-hover:opacity-100 group-hover:delay-800
  ">
    Lorem ipsum
  </p>
</div>

    Since as long as the hover event is active, the group-hover: variant will apply the delay-800, it will be effective during the appearance. However, once you move the mouse away and the hover event ends, the group-hover:delay-800 will immediately stop, and for the disappearance, the delay-0 will apply.