invalid-keyframes-use

This rule reports an animation that you apply with an argument other than a string literal of options, such as a number. The compiler cannot read the argument, so the animation gets no options.

Reported

const fade = style.keyframes({ to: "opacity-100" });
style(fade(42));invalid-keyframes-use: a keyframes use requires one literal options string

Fixed

const fade = style.keyframes({ to: "opacity-100" });
style(fade("duration-[42ms]"));

How to fix

Write options as utilities in a string literal, such as "duration-300 ease-out". If the number is a duration in milliseconds, write duration-[42ms], as in the example. Use the unit that matches the intended duration.

A string that contains a utility that is not an animation option is reported by invalid-animation-option instead.

Rule settings