---
title: アニメーション
description: "Yamada UIは、あなたが表現したいアニメーションを簡単に実現するための機能を提供しています。"
---

## 使い方

```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>
```

また、[テーマ](https://yamada-ui.com/docs/theming.md)の[キーフレーム](https://yamada-ui.com/docs/theming/tokens/keyframes.md)を使用することで、アプリケーション全体で共通のキーフレームを適用することができます。使用する場合は、`animationName`または`_keyframes`に値を設定します。

```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>
```

### テーマのトークンを使う

[テーマ](https://yamada-ui.com/docs/theming.md)の[アニメーション](https://yamada-ui.com/docs/theming/tokens/animations.md)を使用する場合は、`animation`に値を設定します。

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

:::warning
デフォルトでは、アニメーションのトークンは定義されていません。
:::

## コンポーネント

Yamada UIには、アニメーションをより簡単にしたコンポーネントを提供しています。

- [Motion](https://yamada-ui.com/docs/components/motion.md): [Motion](https://motion.dev/)にYamada UIの[Style Props](https://yamada-ui.com/docs/styling/style-props.md)を拡張した便利なコンポーネントです。
- [Airy](https://yamada-ui.com/docs/components/airy.md): ２つの要素をふわっと切り替えるアニメーションを提供するコンポーネントです。
- [Collapse](https://yamada-ui.com/docs/components/collapse.md): 要素を展開または折りたたんで表示するコンポーネントです。
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): 要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。
- [Fade](https://yamada-ui.com/docs/components/fade.md): 要素を次第に表示または非表示にするコンポーネントです。
- [Flip](https://yamada-ui.com/docs/components/flip.md): ２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。
- [Ripple](https://yamada-ui.com/docs/components/ripple.md): 要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。
- [Rotate](https://yamada-ui.com/docs/components/rotate.md): ２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
- [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): 要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。
- [Slide](https://yamada-ui.com/docs/components/slide.md): 要素をページの隅から表示または非表示にするコンポーネントです。

## フック

Yamada UIには、アニメーションの便利なカスタムフックを提供しています。

- [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md): CSSの`keyframes`のように記述してアニメーションを実装するカスタムフックです。
- [useDynamicAnimation](https://yamada-ui.com/docs/hooks/use-dynamic-animation.md): アニメーションを切り替えるために使用するカスタムフックです。