---
title: useAnimation
description: "`useAnimation`は、CSSの`keyframes`のように記述してアニメーションを実装するカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-animation
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useanimation--basic
---

```tsx
const animation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box w="full" h="xs" animation={animation} />
```

## 使い方

```tsx
import { useAnimation } from "@yamada-ui/react"
```

```tsx
import { useAnimation } from "@/components/ui"
```

```tsx
import { useAnimation } from "@workspaces/ui"
```

```tsx
const animation = useAnimation()
```

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

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

```tsx
const animation = useAnimation("gradient")

return <Box w="full" h="xs" animation={animation} />
```

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

### 複数のアニメーションを使う

複数のアニメーションを使う場合は、引数を配列に設定します。

```tsx
const animation = useAnimation([
  {
    keyframes: {
      "0%": {
        bg: "red.500",
      },
      "20%": {
        bg: "green.500",
      },
      "40%": {
        bg: "purple.500",
      },
      "60%": {
        bg: "yellow.500",
      },
      "80%": {
        bg: "blue.500",
      },
      "100%": {
        bg: "red.500",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        h: "xs",
      },
      "50%": {
        h: "md",
      },
      "100%": {
        h: "xs",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        w: "full",
      },
      "50%": {
        w: "50%",
      },
      "100%": {
        w: "full",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
])

return (
  <Box h="md">
    <Box w="full" h="xs" animation={animation} />
  </Box>
)
```

### レスポンシブデザインを使う

レスポンシブデザインを使う場合は、`animation`にオブジェクトを設定します。

```tsx
const desktopAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

const tabletAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "cyan.500",
    },
    "20%": {
      bg: "emerald.500",
    },
    "40%": {
      bg: "pink.500",
    },
    "60%": {
      bg: "amber.500",
    },
    "80%": {
      bg: "sky.500",
    },
    "100%": {
      bg: "cyan.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return (
  <Box
    w="full"
    h="xs"
    animation={{ base: desktopAnimation, md: tabletAnimation }}
  />
)
```

### カラーモードを使う

カラーモードを使う場合は、`animation`に配列を渡します。

```tsx
const lightAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

const darkAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.800",
    },
    "20%": {
      bg: "green.800",
    },
    "40%": {
      bg: "purple.800",
    },
    "60%": {
      bg: "yellow.800",
    },
    "80%": {
      bg: "blue.800",
    },
    "100%": {
      bg: "red.800",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box w="full" h="xs" animation={[lightAnimation, darkAnimation]} />
```