---
title: "invalid-keyframes-use"
description: "Reports an animation applied with an argument that is not a string of options."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx
const fade = style.keyframes({ to: "opacity-100" });
style(fade(42));
```

> invalid-keyframes-use: a keyframes use requires one literal options string
> 
> Example:2:12

## Fixed

```tsx
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](/docs/lints/invalid-animation-option) instead.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | deny |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/invalid-keyframes-use/index.mdx