---
title: Animation
description: "Yamada UI provides features to easily achieve the animation you want."
---

## Usage

```tsx
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
>
  Box
</Box>
```

You can also use [theme](https://yamada-ui.com/docs/theming.md) [keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md) to apply common keyframes throughout your application. Using `animationName` or `_keyframes` is recommended.

```tsx
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationName="fade-in"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
>
  Box
</Box>
```

### Use Theme Tokens

To use [theme](https://yamada-ui.com/docs/theming.md) [animations](https://yamada-ui.com/docs/theming/tokens/animations.md), set the `animation` property.

```tsx
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animation="fade-in"
>
  Box
</Box>
```

:::warning
By default, no animation tokens are defined.
:::

## Components

Yamada UI provides components that make animations easier to implement.

- [Motion](https://yamada-ui.com/docs/components/motion.md): A convenient component that extends the Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) to [Motion](https://motion.dev/).
- [Airy](https://yamada-ui.com/docs/components/airy.md): A component that provides an animation that smoothly switches between two elements.
- [Collapse](https://yamada-ui.com/docs/components/collapse.md): A component that expands or collapses an element to display it.
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): A component that gradually expands or shrinks an element to display or hide it.
- [Fade](https://yamada-ui.com/docs/components/fade.md): A component that gradually displays or hides an element.
- [Flip](https://yamada-ui.com/docs/components/flip.md): A component that provides an animation that flips between two elements.
- [Ripple](https://yamada-ui.com/docs/components/ripple.md): A component that provides a ripple effect to an element to recognize if the user has clicked it.
- [Rotate](https://yamada-ui.com/docs/components/rotate.md): A component that provides an animation that rotates between two elements.
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): A component that functions as a placeholder until the content is loaded.
- [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): A component that gradually displays or hides an element from a specified position.
- [Slide](https://yamada-ui.com/docs/components/slide.md): A component that displays or hides an element from the corner of the page.

## Hooks

Yamada UI provides convenient custom hooks for animations.

- [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md): A custom hook that implements animations similar to CSS `keyframes`.
- [useDynamicAnimation](https://yamada-ui.com/docs/hooks/use-dynamic-animation.md): A custom hook that is used to switch animations.