---
title: "invalid-animation-option"
description: "Reports a utility in the options of an animation that is not an animation option, such as p-4."
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-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

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

> invalid-animation-option: unknown animation option `p-4`
> 
> Example:2:13

## Fixed

```tsx
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()](/docs/macros/keyframes#apply-the-animation).

## 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-animation-option/index.mdx