---
title: "invalid-keyframes-definition"
description: "Reports a style.keyframes() frame key that is not a keyframe position, such as middle."
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-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

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

> invalid-keyframes-definition: keyframe selectors must be `from`, `to`, or comma-separated percentages
> 
> Example:1:32

## Fixed

```tsx
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()](/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-definition/index.mdx