@variant inside @keyframes generates wrong css

[kefranabg]

What version of Tailwind CSS are you using?

v4.0.12

What build tool (or framework if it abstracts the build tool) are you using?

For example: Vite 6.2.0 + tailwindcss vite plugin

What version of Node.js are you using?

v23.0.0

What operating system are you using?

For example: macOS

Describe your issue

The following

@keyframes bgHighlightFade {
	0% {
		background-color: var(--color-amber-200);
		@variant dark {
			background-color: var(--color-amber-500);
		}
	}
	100% {
		background-color: transparent;
	}
}

generates this CSS when building with vite:

@keyframes bgHighlightFade {
  to {
   background-color:#0000
  }
}

Expected result is below (works properly in dev mode):

@keyframes bgHighlightFade {
    0% {
      background-color: var(--color-amber-200);
      &:is(.dark *) {
        background-color: var(--color-amber-500);
      }
    }
    100% {
      background-color: transparent;
    }
  }

[wongjn]

I believe this happens because you can't have nested rules inside @keyframes. Thus, the syntax is unexpected and seems to cause the whole 0% block to be missing. you could try using a CSS variable instead like:

<div class="animate-bgHighlightFade dark:[--bg:var(--color-amber-500)]">

@keyframes bgHighlightFade {
  0% {
    background-color: var(--bg, var(--color-amber-200));
  }
  100% {
    background-color: transparent;
  }
}