Skip to Content
DocsEnterpriseBlogShowcase

Animation

Using CSS animations to animate Chakra UI components

SourceStorybookRecipe

We recommend using CSS animations to animate your Chakra UI components. This approach is performant, straightforward and provides a lot of flexibility.

You can animate both the mounting and unmounting phases of your components with better control.

Enter animation

When a disclosure component (popover, dialog) is open, the data-state attribute is set to open. This maps to data-state=open and can be styled with _open pseudo prop.

<Box
  data-state="open"
  _open={{
    animation: "fade-in 300ms ease-out",
  }}
>
  This is open
</Box>

Here's an example that uses keyframes to create a fade-in animation:

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Exit animation

When a disclosure component (popover, dialog) is closed, the data-state attribute is set to closed. This maps to data-state=closed and can be styled with _closed pseudo prop.

<Box
  data-state="closed"
  _closed={{
    animation: "fadeOut 300ms ease-in",
  }}
>
  This is closed
</Box>

Here's an example that uses keyframes to create a fade-out animation:

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Composing animations

Use the animationName prop to compose multiple animations together. This makes it easy to create complex animations with multiple keyframes.

<Box
  data-state="open"
  _open={{
    animationName: "fade-in, scale-in",
    animationDuration: "300ms",
  }}
  _closed={{
    animationName: "fade-out, scale-out",
    animationDuration: "120ms",
  }}
>
  This is a composed animation
</Box>