动画

了解如何在 Chakra UI 中自定义动画和关键帧

info

请先阅读 overview 组件，了解如何正确自定义样式引擎并确保类型安全。

¥Please read the overview first to learn how to properly customize the styling engine, and get type safety.

关键帧

¥Keyframes

关键帧用于定义动画序列。以下是如何定义自定义关键帧：

¥Keyframes are used to define the animation sequence. Here's how to define custom keyframes:

theme.ts

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

定义关键帧后，你可以创建引用它们的动画令牌。动画令牌可以包含关键帧名称、时长、计时函数和其他动画属性。

¥After defining keyframes, you can create animation tokens that reference them. Animation tokens can include the keyframe name, duration, timing function, and other animation properties.

theme.ts

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

你可以在组件 style props 中直接使用动画令牌。

¥You can use the animation token directly in your component style props.

<Box animation="shakeX" />

或作为单独的动画属性

¥or as individual animation properties

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

概述

断点