Animations
Learn how to customize animations in Chakra UI
info
Please read the overview first to learn
how to properly customize the styling engine, and get type safety.Example
Here's an example of how to customize keyframes in Chakra UI.
theme.ts
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const config = defineConfig({
theme: {
keyframes: {
wiggle: {
"0%, 100%": { transform: "rotate(-3deg)" },
"50%": { transform: "rotate(3deg)" },
},
},
tokens: {
animations: {
wiggle: { value: "wiggle 1s infinite" },
},
},
},
})
export const system = createSystem(defaultConfig, config)Usage
Set the value value of animationName or animation style prop to apply the
keyframes and animation respectively.
app.tsx
<Box animation="wiggle" />
<Box animationName="wiggle" animationDuration="fast" animationIterationCount="infinite" />