애니메이션 커스터마이징

애니메이션 커스터마이징 (Customizing Animations)

Chakra UI에서 애니메이션과 keyframe을 커스터마이징하는 방법에 대해 알아봐요. 커스텀 keyframe을 정의하고 이를 참조하는 애니메이션 토큰을 만들어 사용할 수 있어요.

출처: 문서

본문

:::info

스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.

:::

Keyframes

Keyframe은 애니메이션 시퀀스를 정의하는 데 사용해요. 커스텀 keyframe을 정의하는 방법은 다음과 같아요.

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    keyframes: {
      shakeX: {
        "0%, 100%": { transform: "translateX(-100%)" },
        "50%": { transform: "translateX(100%)" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

애니메이션 토큰 (Animation Tokens)

Keyframe을 정의한 뒤에는 이를 참조하는 애니메이션 토큰을 만들 수 있어요. 애니메이션 토큰에는 keyframe 이름, 지속시간, 타이밍 함수 등 애니메이션 속성을 담을 수 있어요.

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    keyframes: {
      // ... keyframes from above
    },
    tokens: {
      animations: {
        shakeX: { value: "shakeX 1s ease-in-out infinite" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

사용법 (Usage)

애니메이션 토큰은 컴포넌트 스타일 프로퍼티에 직접 사용할 수 있어요.

<Box animation="shakeX" />

또는 개별 애니메이션 속성으로 나눠서 사용할 수도 있어요.

<Box
  animationName="shakeX"
  animationDuration="1s"
  animationTimingFunction="ease-in-out"
  animationIterationCount="infinite"
/>

더 알아보기 (Learn more)