Animation

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>