Animation messing up Tailwind styles

Issue

I have a css file with the following animation:

.intro-x {
  opacity: 0;
  transform: translateX(100px);
  animation: intro-x 1s ease forwards;
}

@keyframes intro-x {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Button:

<button className="intro-x bg-slate-900 text-white hover:opacity-70">Click here!</button>

If I use this animation on the button, the hover:opacity-70 style doesn't work!

OBS: I'm using Next.js with Tailwind

Solution

Consider having the "natural" state of the .intro-x be the to state of the @keyframes. This means we can remove animation-fill-mode: forwards, which stops the to state of the @keyframes from taking precedence, thus allowing other CSS to affect the <button>'s opacity.

.intro-x {
  animation: intro-x 1s ease;
}

@keyframes intro-x {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
}

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<button class="intro-x bg-slate-900 text-white hover:opacity-70">Click here!</button>

Answered By - Wongjn