Animation Styles - Chakra Ui

Overview

Animation styles allow you to define reusable animation properties. The goal is to reduce the amount of code needed to animate components.

The supported animation styles are:

Animation: animation composition, delay, direction, duration, fill mode, iteration count, name, play state, timing function
Animation range: animation range, start, end, timeline
Transform origin: transform origin

Defining animation styles

Animation styles are defined using the defineAnimationStyles function.

Here's an example of an animation style:

import { defineAnimationStyles } from "@chakra-ui/react"

const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value: {
      animationName: "bounce, fade-in",
      animationDuration: "1s",
      animationTimingFunction: "ease-in-out",
      animationIterationCount: "infinite",
    },
  },
})

Built-in animation styles

Chakra UI provides a set of built-in animation styles that you can use.

Update the theme

To use the animation styles, update the theme object with the animationStyles property.

import { createSystem, defineConfig } from "@chakra-ui/react"
import { animationStyles } from "./animation-styles"

const config = defineConfig({
  theme: {
    animationStyles,
  },
})

export default createSystem(defaultConfig, config)

After updating the theme, run the typegen command to generate the animation types. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

bash

npx @chakra-ui/cli typegen ./theme.ts

These animation styles can be composed with other styles like _open and _closed which map to the data-state=open|closed attribute.

jsx

<Box
  data-state="open"
  animationDuration="slow"
  animationStyle={{ _open: "slide-fade-in", _closed: "slide-fade-out" }}
>
  This content will fade in
</Box>