# css.viewTransition

Source: https://plumeria.dev/docs/api-reference/javascript/viewTransition





```ts
export type viewTransition = <const T extends ViewTransition>(rule: T) => string;
export const viewTransition: viewTransition;
```

Use this when you want to customize the default cross-fade of a View Transition. It returns a unique `view-transition-name`.

```ts
type ViewTransitionOptions = {
  group?: CSSProperties;
  imagePair?: CSSProperties;
  new?: CSSProperties;
  old?: CSSProperties;
};
```

## Example [#example]

<Tabs items="[&#x22;ts&#x22;, &#x22;css&#x22;]">
  <Tab>
    ```ts title="TypeScript"
    import * as css from '@plumeria/core';

    const fadeIn = css.keyframes({
      from: { opacity: 0 },
      to: { opacity: 1 },
    });

    const fadeOut = css.keyframes({
      from: { opacity: 1 },
      to: { opacity: 0 },
    });

    const longCrossFade = css.viewTransition({
      old: {
        animationName: fadeOut,
        animationDuration: '1.2s',
      },
      new: {
        animationName: fadeIn,
        animationDuration: '1.2s',
      },
    });

    export const transition = css.create({
      name: {
        viewTransitionName: longCrossFade,
      },
    });
    ```
  </Tab>

  <Tab>
    ```css title="CSS"
    @keyframes kf-x34h9adh {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes kf-xmzotw7h {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    ::view-transition-old(vt-xsq18f68) {
      animation-name: kf-xmzotw7h;
      animation-duration: 1.2s;
    }

    ::view-transition-new(vt-xsq18f68) {
      animation-name: kf-x34h9adh;
      animation-duration: 1.2s;
    }

    .xa6j6hgv {
      view-transition-name: vt-xjp967de;
    }
    ```
  </Tab>
</Tabs>

## Usage with React [#usage-with-react]

Since it returns a view-transition-name, you apply it to the element that should animate.

```jsx title="React ViewTransition"
import { unstable_ViewTransition as ViewTransition } from 'react';
import { transition } from './animation';

<ViewTransition name={transition.name}>
  {/* ... */}
</ViewTransition>
```