---
title: "invalid-view-transition-definition"
description: "Reports an unknown field in a style.viewTransition() 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-view-transition-definition

This rule reports a `style.viewTransition()` definition that the compiler cannot
read, such as an unknown field. Each field must name a snapshot pseudo-element,
so an unknown field produces no CSS.

## Reported

```tsx
const transition = style.viewTransition({ before: "opacity-0" });
style(transition.for("card"));
```

> invalid-view-transition-definition: view transition keys must be `group`, `old`, `new`, or `imagePair`
> 
> Example:1:43

## Fixed

```tsx
const transition = style.viewTransition({ old: "opacity-0" });
style(transition.for("card"));
```

## How to fix

- Use the fields `group`, `imagePair`, `old`, and `new`. `old` styles the snapshot
  before the update, and `new` styles the snapshot after it.
- Write each field as a utility string literal.

See [style.viewTransition()](/docs/macros/view-transition#define-the-snapshot-styles).

## 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-view-transition-definition/index.mdx