invalid-animation-option

This rule reports a utility in the options of an animation that does not set an animation property, such as p-4. The options accept timing utilities such as duration-300, ease-out, and delay-150, and fill modes such as both. The other utility produces no CSS.

Reported

const fade = style.keyframes({ to: "opacity-100" });
style(fade("p-4"));invalid-animation-option: unknown animation option `p-4`

Fixed

const fade = style.keyframes({ to: "opacity-100" });
style("p-4", fade(""));

How to fix

• Move the utility out of the animation options and into the style() call, as in the example.
• Keep only animation options, such as duration-300 or both, in the options.

See style.keyframes().

Rule settings