# Animations

## Keyframes

Chakra UI supports the following keyframes out of the box.

| Animation Key            | Example                                       |
| ------------------------ | --------------------------------------------- |
| `spin`                   | <Box animation="spin 1s" />                   |
| `pulse`                  | <Box animation="pulse 1s" />                  |
| `ping`                   | <Box animation="ping 1s" />                   |
| `bounce`                 | <Box animation="bounce 1s" />                 |
| `bg-position`            | <Box animation="bg-position 1s" />            |
| `position`               | <Box animation="position 1s" />               |
| `circular-progress`      | <Box animation="circular-progress 1s" />      |
| `expand-height`          | <Box animation="expand-height 1s" />          |
| `collapse-height`        | <Box animation="collapse-height 1s" />        |
| `expand-width`           | <Box animation="expand-width 1s" />           |
| `collapse-width`         | <Box animation="collapse-width 1s" />         |
| `fade-in`                | <Box animation="fade-in 1s" />                |
| `fade-out`               | <Box animation="fade-out 1s" />               |
| `slide-from-left-full`   | <Box animation="slide-from-left-full 1s" />   |
| `slide-from-right-full`  | <Box animation="slide-from-right-full 1s" />  |
| `slide-from-top-full`    | <Box animation="slide-from-top-full 1s" />    |
| `slide-from-bottom-full` | <Box animation="slide-from-bottom-full 1s" /> |
| `slide-to-left-full`     | <Box animation="slide-to-left-full 1s" />     |
| `slide-to-right-full`    | <Box animation="slide-to-right-full 1s" />    |
| `slide-to-top-full`      | <Box animation="slide-to-top-full 1s" />      |
| `slide-to-bottom-full`   | <Box animation="slide-to-bottom-full 1s" />   |
| `slide-from-top`         | <Box animation="slide-from-top 1s" />         |
| `slide-from-bottom`      | <Box animation="slide-from-bottom 1s" />      |
| `slide-from-left`        | <Box animation="slide-from-left 1s" />        |
| `slide-from-right`       | <Box animation="slide-from-right 1s" />       |
| `slide-to-top`           | <Box animation="slide-to-top 1s" />           |
| `slide-to-bottom`        | <Box animation="slide-to-bottom 1s" />        |
| `slide-to-left`          | <Box animation="slide-to-left 1s" />          |
| `slide-to-right`         | <Box animation="slide-to-right 1s" />         |
| `scale-in`               | <Box animation="scale-in 1s" />               |
| `scale-out`              | <Box animation="scale-out 1s" />              |
| `marqueeX`               | <Box animation="marqueeX 1s" />               |
| `marqueeY`               | <Box animation="marqueeY 1s" />               |

## Durations

Chakra UI supports the following durations out of the box.

| Duration Token | Value   | Example                                                   |
| -------------- | ------- | --------------------------------------------------------- |
| `slowest`      | `500ms` | <Box animationName="spin" animationDuration="slowest" />  |
| `slower`       | `400ms` | <Box animationName="spin" animationDuration="slower" />   |
| `slow`         | `300ms` | <Box animationName="spin" animationDuration="slow" />     |
| `moderate`     | `200ms` | <Box animationName="spin" animationDuration="moderate" /> |
| `fast`         | `150ms` | <Box animationName="spin" animationDuration="fast" />     |
| `faster`       | `100ms` | <Box animationName="spin" animationDuration="faster" />   |
| `fastest`      | `50ms`  | <Box animationName="spin" animationDuration="fastest" />  |