---
title: "invalid-keyframes-variant"
description: "Reports a state or container variant around a style.keyframes() definition."
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-variant

This rule reports a state or container variant, such as `hover:`, around a
definition inside `style.keyframes()`. A keyframes definition belongs to no
element, so it cannot be hovered. Only media and `supports-*` variants can choose
a definition.

## Reported

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

> invalid-keyframes-variant: keyframes definition variants must be media or supports conditions; container queries do not condition global keyframes
> 
> Example:1:33

## Fixed

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

## How to fix

- To animate an element while it is in a state, put the variant around the
  animation in `style()`, as in the example.
- To use a different animation for a media condition, such as reduced motion,
  keep the variant in the definition: `"motion-reduce:": { ... }`.

See [style.keyframes()](/docs/macros/keyframes#define-the-frames).

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