invalid-keyframes-definition

This rule reports a style.keyframes() definition that the compiler cannot read, such as a frame key that is not from, to, or a percentage. The frame produces no CSS.

Reported

const fade = style.keyframes({ middle: "opacity-50" });invalid-keyframes-definition: keyframe selectors must be `from`, `to`, or comma-separated percentages
style(fade("duration-300"));

Fixed

const fade = style.keyframes({ "50%": "opacity-50" });
style(fade("duration-300"));

How to fix

• Name each frame with from, to, or a percentage such as "50%".
• Write frame utilities without variants. To use a different animation under a condition, add a whole definition under a variant key.
• Write the definition as an object literal, as the initial value of a variable.

See style.keyframes().

Rule settings