invalid-keyframes-variant

This rule reports a state or container variant, such as hover:, around a definition inside style.keyframes(). A keyframes definition belongs to no element, so it cannot be hovered. Only media and supports-* variants can choose a definition.

Reported

const fade = style.keyframes({ "hover:": { to: "opacity-100" } });invalid-keyframes-variant: keyframes definition variants must be media or supports conditions; container queries do not condition global keyframes
style(fade("duration-300"));

Fixed

const fade = style.keyframes({ to: "opacity-100" });
style({ "hover:": fade("duration-300") });

How to fix

• To animate an element while it is in a state, put the variant around the animation in style(), as in the example.
• To use a different animation for a media condition, such as reduced motion, keep the variant in the definition: "motion-reduce:": { ... }.

See style.keyframes().

Rule settings