# css.keyframes

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





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

The `keyframes()` method generates a unique animation variable name (a unique hash that is inlined during build time) that can be used in styles.

## 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 styles = css.create({
      box: {
        animationName: fadeIn,
        animationDuration: '1s',
        animationTimingFunction: 'ease-in-out',
      },
    });
    ```
  </Tab>

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

    .xhc714s1:not(#\#) { animation-name: kf-x34h9adh; }
    .xdm4omap:not(#\#) { animation-duration: 1s; }
    .xvct32ng:not(#\#) { animation-timing-function: ease-in-out; }
    ```
  </Tab>
</Tabs>

## Usage [#usage]

You can also trigger animations on hover or using other pseudo selectors:

```ts
const styles = css.create({
  card: {
    transition: 'transform 0.3s ease',
    ':hover': {
      animationName: fadeIn,
      animationDuration: '0.5s',
    },
  },
});
```